<.text_input id="text-input-types-basic" name="basic" placeholder="Placeholder text...">
  <:prefix>
    <.user />
  </:prefix>
</.text_input>
<.text_input
  id="text-input-types-email"
  name="email"
  type="email"
  placeholder="hello@tuist.dev"
/>
<.text_input
  id="text-input-types-card-number"
  name="card_number"
  type="card_number"
  placeholder="0000 0000 0000 0000"
/>
<.text_input id="text-input-types-search" name="search" type="search" placeholder="Search..."/>
<.text_input id="text-input-types-password" name="card_number" type="password"/>

<.text_input
  id="text-input-single-with-hint"
  name="with_hint"
  placeholder="Placeholder text..."
  suffix_hint="Suffix text..."
/>

<.text_input
  error
  id="text-input-single-error"
  name="error"
  placeholder="Placeholder text..."
  suffix_hint="Suffix text..."
/>

<.text_input
  id="text-input-single-with-custom-suffix"
  name="with_custom_suffix"
  placeholder="Placeholder text..."
>
  <:suffix>
    <.user/>
  </:suffix>
</.text_input>

<.text_input id="text-input-label-email" label="Email" name="email" type="email" required/>
<.text_input
  id="text-input-label-password"
  label="Password"
  name="password"
  type="password"
  sublabel="(Be safe!)"
/>

<.text_input
  disabled
  id="text-input-disabled-unfilled"
  name="email"
  type="email"
  placeholder="hello@tuist.dev"
  suffix_hint="This should be a valid email address ending in `@tuist.dev`."
/>
<.text_input
  disabled
  id="text-input-disabled-filled"
  name="email"
  type="email"
  value="hello@tuist.dev"
  suffix_hint="This should be a valid email address ending in `@tuist.dev`."
/>