Input

Versatile fields for collecting user data in forms.

<.input field={f[:full_name]} />

Label

Add clear, descriptive labels to inputs for improved usability.

<.input field={f[:full_name]} label="Full name" />

Description

Provide context below labels and above inputs for additional guidance.

<.input
  field={f[:full_name]}
  label="Full name"
  description="This is a description"
/>

Help text

Display information or validation rules below inputs to guide users.

<.input
  field={f[:full_name]}
  label="Full name"
  help_text="Enter your full legal name"
/>

Sizes

Offer multiple input sizes to suit different layouts and preferences.

<.input name="size-sm" label="Small" size="sm" />
<.input name="size-base" label="Regular" />
<.input name="size-lg" label="Large" size="lg" />
<.input name="size-xl" label="Extra Large" size="xl" />

Disabled

Show inputs in a disabled state for non-editable or unavailable fields.

Disabled

<.input type="text" disabled />

Errors

Present validation feedback with error states for input fields.

<.input
  field={f[:first_name]}
  placeholder="First name"
  label="First name"
/>

<.input
  name="first_name"
  placeholder="First name"
  label="First name"
  errors={["First name is required"]}
/>

Addons

Enhance inputs with inner and outer prefixes and suffixes.

Inner prefix

Add elements within the input field on the left side.

<.input field={f[:credit_card]} placeholder="0000-0000-0000-0000" class="pl-10">
  <:inner_prefix>
    <.icon name="hero-credit-card" class="icon text-zinc-400" />
  </:inner_prefix>
</.input>

<.input field={f[:username]} placeholder="www.example.com" class="pl-16">
  <:inner_prefix class="pointer-events-none text-zinc-500">https://</:inner_prefix>
</.input>

Inner suffixes

Include elements inside the input field on the right side.

<.input field={f[:email]}>
  <:inner_suffix>
    <.loading variant="ring-bg" class="text-gray-400" />
  </:inner_suffix>
</.input>

<.input field={f[:password]}>
  <:inner_suffix class="text-zinc-400">
    <.button variant="ghost" size="sm"><.icon name="hero-eye" class="icon text-zinc-500" /></.button>
  </:inner_suffix>
</.input>

<.input name="email" errors={["has already been taken"]}>
  <:inner_suffix class="text-zinc-400">
    <.icon name="hero-exclamation-circle" class="size-4 text-red-400" />
  </:inner_suffix>
</.input>

Outer prefixes

Place additional content or controls before the input field.

<.input field={f[:url]}>
  <:outer_prefix class="text-zinc-500 px-2 bg-zinc-100">https://</:outer_prefix>
</.input>

<.input field={f[:price]} class="pl-6" placeholder="0.00">
  <:inner_prefix class="text-zinc-500">$</:inner_prefix>
  <:outer_prefix class="text-zinc-500">
    <select class="h-full w-full rounded-l-lg outline-blue-500 px-2">
      <option value="USD">USD</option>
      <option value="BRL">BRL</option>
      <option value="EUR">EUR</option>
    </select>
  </:outer_prefix>
</.input>

Outer suffixes

Append elements after the input field for context or actions.

<.input field={f[:url]} class="pl-8">
  <:inner_prefix><.icon name="u-at-sign" class="size-4 text-zinc-400" /></:inner_prefix>
  <:outer_suffix>
    <.button variant="solid"><.icon name="u-send-01" class="icon" /> Invite</.button>
  </:outer_suffix>
</.input>

<.input field={f[:price]} class="pl-6" placeholder="0.00">
  <:inner_prefix class="text-zinc-500">$</:inner_prefix>
  <:outer_suffix>
    <.button>Refund</.button>
  </:outer_suffix>
</.input>