Field

A wrapper component that provides structure for form fields with labels, descriptions, and error messages.

Default

With Description

Add helper text below the input using the description slot.

With Description

Username

This will be your public display name.

    <.field>
  <:label>Username</:label>
  <:input>
    <.input type="text" placeholder="johndoe" />
  </:input>
  <:description>This will be your public display name.</:description>
</.field>
  

Horizontal Layout

Use orientation="horizontal" for side-by-side label and input layout.

Horizontal

Full Name

With Checkbox

Field works with any input type, including checkboxes.

With Checkbox

Accept terms and conditions

    <.field orientation="horizontal" class="flex-row-reverse justify-end gap-2">
  <:label for="terms-checkbox">Accept terms and conditions</:label>
  <:input>
    <.checkbox name="terms" id="terms-checkbox" />
  </:input>
</.field>
  

Fieldset

Use <.fieldset> to group related fields with a legend.

Fieldset

Personal Information

First Name

Last Name

    <.fieldset>
  <:legend>Personal Information</:legend>
  <:fields>
    <.field>
      <:label>First Name</:label>
      <:input><.input type="text" placeholder="John" /></:input>
    </.field>
    <.field>
      <:label>Last Name</:label>
      <:input><.input type="text" placeholder="Doe" /></:input>
    </.field>
  </:fields>
</.fieldset>
  

Section Slot

Use the section slot to add content between the label and input.

With Section

    <.field>
  <:label>Avatar</:label>
  <:section>
    <div class="w-16 h-16 rounded-full bg-muted">JD</div>
  </:section>
  <:input>
    <.input type="file" />
  </:input>
  <:description>Upload a profile picture.</:description>
</.field>
  