Forms

Forms compose from small pieces: a field lays out each label, control, and description, and the controls build on native form elements, so values submit with the form. This page shows the pieces working together and links out to each one.

<form class="field-group">
  <fieldset class="field-set">
    <legend class="field-legend">Contact</legend>
    <p class="field-description">How we can reach you about your booking.</p>
    <div class="field-group">
      <div class="field">
        <label class="label" for="forms-name">Full name</label>
        <input class="input" id="forms-name" name="name" placeholder="John Smith" />
      </div>
      <div class="field">
        <label class="label" for="forms-email">Email address</label>
        <input class="input" id="forms-email" name="email" type="email" placeholder="[email protected]" />
        <p class="field-description">We only use this for the booking confirmation.</p>
      </div>
      <div class="field">
        <label class="label" for="forms-website">Website</label>
        <div class="input-group">
          <span class="input-group-addon"><span class="input-group-text">https://</span></span>
          <input class="input pl-0.5!" id="forms-website" name="website" placeholder="example.com" />
        </div>
      </div>
      <div class="field">
        <label class="label" for="forms-country-input">Country</label>
        <div class="input-group" id="forms-country-field">
          <input class="input" id="forms-country-input" placeholder="Select a country" />
          <span class="input-group-addon input-group-addon-end">
            <button class="btn btn-ghost btn-xs btn-icon" type="button" tabindex="-1" aria-label="Open list"><svg class="text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
          </span>
        </div>
      </div>
      <div class="combobox" data-sp-toggle="#forms-country-field">
        <div class="combobox-empty">No countries found.</div>
        <div class="combobox-list">
          <div class="combobox-item"><input type="radio" name="country" value="de" /> Germany</div>
          <div class="combobox-item"><input type="radio" name="country" value="se" /> Sweden</div>
          <div class="combobox-item"><input type="radio" name="country" value="uk" /> United Kingdom</div>
          <div class="combobox-item"><input type="radio" name="country" value="us" /> United States</div>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="field-separator"></div>
  <fieldset class="field-set">
    <legend class="field-legend">Event details</legend>
    <p class="field-description">What we are planning together.</p>
    <div class="field-group">
      <div class="field">
        <label class="label" for="forms-type">Event type</label>
        <select class="select" id="forms-type" name="type">
          <option value="">Select event type</option>
          <option value="wedding">Wedding Reception</option>
          <option value="corporate">Corporate Event</option>
          <option value="birthday">Birthday Party</option>
        </select>
      </div>
      <div class="field">
        <label class="label" for="forms-date">Event date</label>
        <input class="input" id="forms-date" name="date" type="date" />
      </div>
      <div class="field">
        <span class="field-title">Guests</span>
        <p class="field-description">
          Up to <span class="font-medium tabular-nums" data-sp-slider-value="forms-guests">50</span> guests.
        </p>
        <input type="range" class="slider mt-2" id="forms-guests" name="guests" min="0" max="200" step="10" value="50" style="--val: 25%" aria-label="Guests" />
      </div>
      <div class="field">
        <label class="label" for="forms-budget">Budget</label>
        <div class="input-group">
          <span class="input-group-addon"><span class="input-group-text">$</span></span>
          <input class="input" id="forms-budget" name="budget" placeholder="0.00" />
          <span class="input-group-addon input-group-addon-end"><span class="input-group-text">USD</span></span>
        </div>
      </div>
      <div class="field">
        <label class="label" for="forms-promo">Promo code</label>
        <div class="btn-group">
          <input class="input" id="forms-promo" name="promo" placeholder="SUMMER25" />
          <button class="btn btn-outline" type="button">Apply</button>
        </div>
      </div>
      <div class="field">
        <label class="label" for="forms-details">Additional details</label>
        <textarea class="textarea" id="forms-details" name="details" placeholder="Tell us about your event..."></textarea>
      </div>
    </div>
  </fieldset>
  <div class="field-separator"></div>
  <fieldset class="field-set">
    <legend class="field-legend">Preferences</legend>
    <p class="field-description">Fine-tune the event to your liking.</p>
    <div class="field-group">
      <fieldset class="field-set">
        <legend class="field-legend field-legend-label">Seating</legend>
        <div class="field-group gap-3">
          <div class="field field-horizontal">
            <input type="radio" class="radio" id="forms-seating-indoor" name="seating" value="indoor" checked />
            <label class="label font-normal" for="forms-seating-indoor">Indoor</label>
          </div>
          <div class="field field-horizontal">
            <input type="radio" class="radio" id="forms-seating-outdoor" name="seating" value="outdoor" />
            <label class="label font-normal" for="forms-seating-outdoor">Outdoor</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="field-set">
        <legend class="field-legend field-legend-label">Add-ons</legend>
        <div class="field-group gap-3">
          <div class="field field-horizontal">
            <input type="checkbox" class="checkbox" id="forms-addon-catering" name="addons" value="catering" checked />
            <label class="label font-normal" for="forms-addon-catering">Catering</label>
          </div>
          <div class="field field-horizontal">
            <input type="checkbox" class="checkbox" id="forms-addon-photo" name="addons" value="photography" />
            <label class="label font-normal" for="forms-addon-photo">Photography</label>
          </div>
        </div>
      </fieldset>
      <div class="field field-horizontal">
        <input type="checkbox" role="switch" class="switch" id="forms-offers" name="offers" />
        <label class="label" for="forms-offers">Email me news and special offers</label>
      </div>
    </div>
  </fieldset>
  <div class="field field-horizontal">
    <button class="btn btn-outline" type="reset">Reset</button>
    <button class="btn" type="submit">Submit</button>
  </div>
</form>

Components

Field — Structured layout for labels, controls, descriptions, and errors
Label — Accessible labels for form fields
Input — Single-line text entry for text, email, password, and other types
Input Group — Compose icons, text, and buttons inside one field
Textarea — Multi-line text input
Select — Native dropdown for choosing from a list of options
Combobox — Searchable option list with single and multi select
Checkbox — Toggle options on and off, with card and table variants
Radio Group — Pick a single option from a set
Switch — Toggle settings on and off
Slider — Pick a value or range along a track
Button — Actions and form submissions
Button Group — Attach related buttons and fields together