Input

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

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

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

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

<.input name="size-xs" label="Extra Small" size="xs" />
<.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" />

<.input type="text" disabled />

<.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"]}
/>

<.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>

<.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="icon-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>

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

<.input field={f[:price]} 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>

<.input field={f[:url]}>
  <: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]} placeholder="0.00">
  <:inner_prefix class="text-zinc-500">$</:inner_prefix>
  <:outer_suffix>
    <.button>Refund</.button>
  </:outer_suffix>
</.input>