t-input

This component provides abstract implementation for any type of input with validation, messages, and state colors. It has several slots to place components while getting access to t-input state.

Learn more about forms.

Basic Usage

$
Field
USD
<TInput
  label={() => <>Label</>}
  outerPrepend={() => <TIcon icon="mdi:phone" />}
  outerAppend={() => <TIcon icon="mdi:close" />}
  prepend={() => <TIcon icon="mdi:heart" size="20" />}
  append={() => <TIcon icon="mdi:eye-off" size="20" />}
  prefix="$"
  suffix="USD"
  hint="Hint"
  field={() => <>Field</>}
  persistentActive
  persistentHint
/>

Text

$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
<TInput
  design="text"
  size="lg"
  //
/>

Outlined

$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
<TInput
  design="outlined"
  size="lg"
  //
/>

Solo

$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
$
Field
USD
<TInput
  design="solo"
  size="lg"
  //
/>

API

No options available

Forms

t-form

Forms

t-input-choice

Table of Contents