Salfati Group UI Library

<k-text-input modelValue="No labels" />

Company NameCorner

This is a help text

<k-text-input
  label="Company Name"
  modelValue="Salfati Group"
  helpText="This is a help text"
  cornerHint="Corner"
/>

Forever invalid

This is error text

<k-text-input
  label="Forever invalid"
  modelValue="Invalid"
  helpText="This is a help text"
  errorText="This is error text"
/>

Disabled input

<k-text-input label="Disabled input" modelValue="Disabled" disabled />

With icons

<k-text-input label="With icons" modelValue="Lots of icons">
  <template #leadingIcon>
    <KIconEmail class="h-5 w-5 text-brand-gray-400" aria-hidden="true" />
  </template>
  <template #trailingIcon>
    <KIconQuestion class="h-5 w-5 text-brand-gray-400" aria-hidden="true" />
  </template>
</k-text-input>

With inset label

<k-text-input
  insetLabel
  label="With inset label"
  placeholder="Placeholder"
/>

<k-text-input softInput placeholder="Placeholder">
  <template #label>
    <KIconSearch class="h-5 w-5 text-brand-gray-400" aria-hidden="true" />
  </template>
</k-text-input>

Pill

<k-text-input label="Pill" placeholder="Placeholder" pill />