Text Input

Stable

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

<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

<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

<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

Name	Type	Description
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

Name	Parameters	Description
@update:modelValue	[value: string | undefined]

Slots

Name	Scoped	Description
#iconLeft	{}
#iconRight	{}

Exposed

Name	Type	Description
inputRef	HTMLInputElement | undefined