Input

Input component is the most fundamental form element, allowing users to enter and edit text content.

Basic Usage

Supports two-way binding via v-model and various type values such as text, password, email, number, etc.

Show Code

<TInput placeholder="Enter text..."/>
<TInput type="password" placeholder="Enter password..."/>
<TInput type="number" placeholder="Enter a number..."/>
<TInput type="email" placeholder="email@example.com"/>

Use the size prop to control the input size: 'lg' (large), default (medium), 'sm' (small).

Show Code

<TInput size="lg" placeholder="Large input"/>
<TInput placeholder="Default input"/>
<TInput size="sm" placeholder="Small input"/>

Style Variants

Two variants: rounded (pill shape) and flush (borderless).

Show Code

<TInput rounded placeholder="Rounded input"/>
<TInput flush placeholder="Borderless input"/>
<TInput disabled placeholder="Disabled input"/>

With Icons

Use prepend-icon and append-icon props to add icons before or after the input. Icons come from @tabler/icons-vue.

Show Code

<TInput :prepend-icon="IconSearch" placeholder="Search..."/>
<TInput type="password" :append-icon="IconUser" placeholder="Username"/>
<TInput :prepend-icon="IconMail" :append-icon="IconAt" placeholder="email@example.com"/>
<TInput :prepend-icon="IconSearch" placeholder="Search users..."/>

Input Groups

Use prepend-text / append-text to add text prefixes/suffixes, or use #prepend / #append slots for custom content like buttons.

Show Code

<TInput prepend-text="https://" placeholder="your-domain.com"/>
<TInput append-text="¥" placeholder="Amount" type="number"/>
<TInput placeholder="Enter email">
  <template #prepend>
    <span class="input-group-text"><IconMail :size="18"/></span>
  </template>
  <template #append>
    <button class="btn btn-primary" type="button">Verify</button>
  </template>
</TInput>

Validation States

Use the validation prop to set validation state: 'valid' (green), 'invalid' (red). Pair with .valid-feedback / .invalid-feedback for messages.

Show Code

<TInput validation="valid" placeholder="Correct input"/>
<div class="valid-feedback">Looks good!</div>

<TInput validation="invalid" placeholder="Wrong input"/>
<div class="invalid-feedback">Please check your input.</div>

Two-way Binding

Supports v-model with string and number types, implemented via defineModel().

Show Code

<script setup lang="ts">
  import {ref} from 'vue'

  const value = ref('')
</script>
<template>
  <p>Current value: {{ value }}</p>
  <TInput v-model="value" placeholder="Try typing something..."/>
</template>

Labels & Hints

Use label, hint, required, and label-description props to quickly build complete form fields with labels and help text.

Show Code

<TInput label="Email address" hint="We'll never share your email with anyone else." placeholder="email@example.com"/>

<TInput label="ZIP Code" label-description="Optional" required placeholder="Your ZIP Code" hint="ZIP Code must be US or CDN format."/>

<TInput placeholder="Enter content...">
  <template #label>Custom label <span class="badge bg-blue ms-1">NEW</span></template>
  <template #hint>Custom <a href="#">hint link</a></template>
</TInput>

TInput Props

Prop	Description	Type	Default
type	Native input type	string	'text'
placeholder	Placeholder text	string	undefined
size	Input size	'sm' | 'lg'	undefined
rounded	Pill/rounded style	boolean	false
flush	Borderless style	boolean	false
disabled	Disabled state	boolean	false
readonly	Readonly state	boolean	false
maxlength	Max character length	number	undefined
minlength	Min character length	number	undefined
name	Native name attribute	string	undefined
id	Native id attribute	string	undefined
autocomplete	Autocomplete hint	string	undefined
required	Whether required	boolean	false
prepend-icon	Prepend icon (Tabler icon component)	Icon	undefined
append-icon	Append icon (Tabler icon component)	Icon	undefined
prepend-text	Prepend text	string	undefined
append-text	Append text	string	undefined
validation	Validation state	'valid' | 'invalid'	undefined
block	Full width (w-100)	boolean	false
label	Label text	string	undefined
label-description	Label description (e.g. char counter)	string	undefined
hint	Hint text below input	string	undefined
wrapper-class	Outer wrapper class (e.g. "mb-3")	string	undefined

TInput Emits

Event	Description	Callback
update:modelValue	Triggered when input value changes	(value: string | number) => void

TInput Slots

Slot	Description
prepend	Prepend content (replaces prepend-text), appears before <input>
append	Append content (replaces append-text), appears after <input>
label	Custom label content (replaces label prop)
hint	Custom hint content (replaces hint prop)