Inputs & Fields

Sprout styles semantic form elements directly. Use the .field class to group a label, control, and optional hint text.

Text input and textarea

<div class="field">
  <label for="name">Name</label>
  <input id="name" type="text" placeholder="Your name">
</div>

<div class="field">
  <label for="bio">Bio</label>
  <textarea id="bio" placeholder="A short bio..."></textarea>
  <small>Optional hint text.</small>
</div>

Name

BioOptional hint text.

Select

<div class="field">
  <label for="country">Country</label>
  <select id="country">
    <option>Select...</option>
    <option>United States</option>
    <option>Canada</option>
    <option>UK</option>
  </select>
</div>

CountrySelect...United StatesCanadaUK

Valid and invalid states

Add .valid or .invalid to the control for feedback styling.

<div class="field">
  <label for="email-ok">Email (valid)</label>
  <input id="email-ok" type="email" class="valid" value="user@example.com">
</div>

<div class="field">
  <label for="email-bad">Email (invalid)</label>
  <input id="email-bad" type="email" class="invalid" placeholder="Invalid">
</div>

Email (valid)

Email (invalid)

Disabled and readonly

Use the native disabled and readonly attributes.

<div class="field">
  <label for="disabled">Disabled</label>
  <input id="disabled" type="text" value="Can't edit" disabled>
</div>

<div class="field">
  <label for="readonly">Read-only</label>
  <input id="readonly" type="text" value="Display only" readonly>
</div>

Disabled

Read-only

Dropdown state

Use the .dropdown class on a text input to show it opens a list (e.g. combobox, autocomplete). Adds a chevron and right padding.

<div class="field">
  <label for="city">City</label>
  <input id="city" type="text" class="dropdown" placeholder="Select or type..." autocomplete="off">
</div>

City

Icon state

Use .icon-start or .icon-end to reserve space for an icon (e.g. location, search). Put the icon in a wrapper next to the input or use a background image.

<div class="field">
  <label for="location">Location</label>
  <input id="location" type="text" class="icon-start" placeholder="Address or place">
</div>

Location

Calendar (date and time)

Use native type="date", type="time", type="datetime-local", type="month", or type="week" for calendar-style inputs. Sprout styles them with consistent padding and height.

<div class="field">
  <label for="dob">Date of birth</label>
  <input id="dob" type="date">
</div>
<div class="field">
  <label for="appt">Appointment time</label>
  <input id="appt" type="time">
</div>

Date of birth

Appointment time

Checkbox and radio

<div class="field">
  <label><input type="checkbox" checked> I agree</label>
</div>

<div class="field">
  <fieldset>
    <legend>Choose one</legend>
    <label><input type="radio" name="opt" value="a" checked> Option A</label>
    <label><input type="radio" name="opt" value="b"> Option B</label>
  </fieldset>
</div>

I agree

Choose one

Option A Option B

Fieldset

Group related controls with <fieldset> and <legend>.

<fieldset>
  <legend>Shipping address</legend>

  <div class="field">
    <label for="street">Street</label>
    <input id="street" type="text">
  </div>

  <div class="field">
    <label for="city">City</label>
    <input id="city" type="text">
  </div>
</fieldset>

Shipping address

Street

City

See also

• Toggle & Range — switch and range slider components.
• Accessibility — labels, focus, and form structure.

Usage notes

• Use .field to group a label, control, and optional hint text with consistent spacing.
• Add .valid or .invalid to controls for success or error feedback after validation.
• Use .dropdown on text inputs that open a list; .icon-start or .icon-end when the input has an icon (e.g. location, search).
• Date and time inputs use native type="date", type="time", etc.; Sprout gives them consistent styling.
• Prefer semantic <label>, <fieldset>, and <legend> for accessible form structure.