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="help-circle"
    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="help-circle"
    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="help-circle"
    top-text="Label"
    bottom-text="Error message"
    placeholder="Placeholder"
    is-invalid
  />
</template>

Shortcut

Use shortcut to display a keyboard shortcut inside the input.

<script setup lang="ts">
import { HTextInput } from '@holistics/design-system'
</script>
<template>
  <HTextInput
    class="w-[200px]"
    icon-left="search"
    top-text="Search"
    placeholder="Search..."
    shortcut="⌘K"
  />
</template>

Variablize

variablize constrains input to a variable-name format: lowercase letters, digits, and underscores. Spaces become underscores; other characters are stripped.

<script setup lang="ts">
import { ref } from 'vue'
import { HTextInput } from '@holistics/design-system'

const value = ref('')
</script>
<template>
  <HTextInput
    v-model="value"
    class="w-[260px]"
    variablize
    top-text="Variable name"
    bottom-text="Lowercase letters, digits and underscores only. Spaces become underscores."
    placeholder="my_variable_name"
  />
</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
inputClass	HTMLAttributeClass
shortcut	string
variablize	boolean = false	Constrain input to a variable-name format: lowercase letters, digits and underscores. Spaces become underscores; other characters are stripped. The caret is preserved across the transform.
id	string
topText	string
bottomText	string
iconLeft	"function" | "add-block" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/claude-spark-clay" | "ai/file" | "ai/gemini" | "ai/generate" | "ai/mascot-color-smile" | ... 439 more ...
iconRight	"function" | "add-block" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/claude-spark-clay" | "ai/file" | "ai/gemini" | "ai/generate" | "ai/mascot-color-smile" | ... 439 more ...
disabled	boolean = false
isInvalid	boolean = false
ariaDescribedby	string
type	InputTypeHTMLAttribute
size	Numberish
required	Booleanish
name	string
form	string
min	Numberish
max	Numberish
placeholder	string
autofocus	Booleanish
enterKeyHint	"search" | "send" | "done" | "enter" | "go" | "next" | "previous"
formaction	string
formenctype	string
formmethod	string
formnovalidate	Booleanish
formtarget	string
list	string
maxlength	Numberish
minlength	Numberish
pattern	string
readonly	Booleanish
step	Numberish
autocomplete	string
modelValue	string

Events

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

Slots

Name	Scoped	Description
#iconLeft	{}
#iconRight	{}

Exposed

Name	Type	Description
inputRef	HTMLInputElement | null
focus	() => void
blur	() => void
select	() => void