Skip to content

Text Input ​

Stable

A single-line text field is used to allow the users to input some text

vue
<script setup lang="ts">
import { HTextInput } from '@holistics/design-system'
</script>
<template>
  <HTextInput
    class="w-[200px]"
    icon-left="info"
    icon-right="question-light"
    top-text="Label"
    bottom-text="Description"
    placeholder="Placeholder"
  />
</template>

Examples ​

Disabled ​

vue
<script setup lang="ts">
import { HTextInput } from '@holistics/design-system'
</script>
<template>
  <HTextInput
    class="w-[200px]"
    icon-left="info"
    icon-right="question-light"
    top-text="Label"
    bottom-text="Description"
    placeholder="Placeholder"
    disabled
  />
</template>

Error ​

vue
<script setup lang="ts">
import { HTextInput } from '@holistics/design-system'
</script>
<template>
  <HTextInput
    class="w-[200px]"
    icon-left="info"
    icon-right="question-light"
    top-text="Label"
    bottom-text="Error message"
    placeholder="Placeholder"
    error
  />
</template>

API ​

Pass-through: <div> ​

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props ​

NameTypeDescription
id 
string
topText 
string
bottomText 
string
iconLeft 
"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
iconRight 
"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
disabled 
boolean
= false
isInvalid 
boolean
= false
containerClass 
HTMLAttributeClass
modelValue 
string

Events ​

NameParametersDescription
@update:modelValue
[value: string | undefined]

Slots ​

NameScopedDescription
#iconLeft
{}
#iconRight
{}

Exposed ​

NameTypeDescription
inputRef
HTMLInputElement | undefined