Forms

Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.

Form Controls

Form controls are styled at 100% of the width of their parent element.

Input Type	Example
`<input type="checkbox">`	Checkbox 1 Checkbox 2
`<input type="color">`
`<input type="date">`
`<input type="email">`
`<input type="file">` File inputs aren’t supported. Use a file button instead.	Select File
`<input type="number">`
`<input type="password">`
`<input type="radio">`	Radio 1 Radio 2
`<input type="range">`
`<input type="search">`
`<input type="text">`
`<input type="time">`
`<select>`
`<textarea>`

You can change the size of most form controls with the input-[xs|sm|lg|xl] modifiers.

<input type="text" class="input-xs" placeholder="XS">
<input type="text" class="input-sm" placeholder="SM">
<input type="text" placeholder="Default">
<input type="text" class="input-lg" placeholder="LG">
<input type="text" class="input-xl" placeholder="XL">

<select class="input-xs"><option>Item</option></select>
<select class="input-sm"><option>Item</option></select>
<select><option>Item</option></select>
<select class="input-lg"><option>Item</option></select>
<select class="input-xl"><option>Item</option></select>

Disabled form controls look like this:

Checkbox Radio

Read-only form controls look like this:

Input Fields

For proper spacing of individual form controls, wrap them in input-field containers.

<div class="input-field">
  <label>Name</label>
  <input type="text">
</div>

<div class="input-field">
  <label>Password</label>
  <input type="password">
</div>

<div class="input-field">
  <label><input type="checkbox"> Remember me</label>
</div>

Username

Password

Remember me

Input Groups

Form controls and buttons can be grouped by wrapping them in input-group containers.

<div class="input-group">
  <input type="text">
  <button type="button" class="button">Submit</button>
</div>

<div class="input-group">
  <button type="button" class="button">Submit</button>
  <input type="text">
</div>

<div class="input-group">
  <input type="text" placeholder="First">
  <input type="text" placeholder="Middle">
  <input type="text" placeholder="Last">
  <button type="button" class="button">Submit</button>
</div>

<div class="input-group">
  <button type="button" class="button">Option 1</button>
  <button type="button" class="button">Option 2</button>
  <button type="button" class="button">Option 3</button>
</div>

Input Hints

You can add textual hints below form controls with the input-hint class.

<div class="input-field">
  <label>Name</label>
  <input type="text">
  <p class="input-hint">What do people call you?</p>
</div>

<div class="input-field">
  <label>Age</label>
  <input type="number">
  <p class="input-hint">Enter your age in years</p>
</div>

Name

What do people call you?

Age

Enter your age in years

Input Addons

To create an input addon, use <span class="input-addon">. Addons can appear anywhere inside an input group. Use the input-addon-[xs|sm|lg|xl] modifiers to change the size to match adjacent form controls.

<div class="input-group">
  <span class="input-addon input-addon-xs">$</span>
  <input type="text" class="input-xs">
  <span class="input-addon input-addon-xs">.00</span>
</div>

<div class="input-group">
  <span class="input-addon input-addon-sm">$</span>
  <input type="text" class="input-sm">
  <span class="input-addon input-addon-sm">.00</span>
</div>

<div class="input-group">
  <span class="input-addon">$</span>
  <input type="text">
  <span class="input-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-addon input-addon-lg">$</span>
  <input type="text" class="input-lg">
  <span class="input-addon input-addon-lg">.00</span>
</div>

<div class="input-group">
  <span class="input-addon input-addon-xl">$</span>
  <input type="text" class="input-xl">
  <span class="input-addon input-addon-xl">.00</span>
</div>

$ .00

Input Icons

Input icons add visual context to form controls. To add icons to a form control, wrap it with an input-icon element and add icons before and after it.

This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.

<div class="input-icon">
  <i class="fa fa-fw fa-phone"></i>
  <input type="text">
</div>

<div class="input-icon">
  <input type="text">
  <i class="fa fa-fw fa-envelope-o"></i>
</div>

<div class="input-icon">
  <i class="fa fa-fw fa-user"></i>
  <input type="text">
  <i class="fa fa-check"></i>
</div>

<div class="input-icon">
  <i class="fa fa-fw fa-map-marker"></i>
  <select><option>United States</option></select>
</div>

Input icons can be used inside form groups.

<div class="input-group">
  <span class="input-addon">Location</span>
  <div class="input-icon">
    <i class="fa fa-fw fa-map-marker"></i>
    <input type="text">
    <i class="fa fa-fw fa-check"></i>
  </div>
  <button type="button">Submit</button>
</div>

Location

Use the input-icon-[xs|sm|lg|xs] modifiers to change the size of input icons to match form controls.

<div class="input-icon input-icon-xs">
  <i class="fa fa-fw fa-user"></i>
  <input class="input-xs" type="text">
  <i class="fa fa-check"></i>
</div>

<div class="input-icon input-icon-sm">
  <i class="fa fa-fw fa-user"></i>
  <input class="input-sm" type="text">
  <i class="fa fa-check"></i>
</div>

<div class="input-icon">
  <i class="fa fa-fw fa-user"></i>
  <input type="text">
  <i class="fa fa-check"></i>
</div>

<div class="input-icon input-icon-lg">
  <i class="fa fa-fw fa-user"></i>
  <input class="input-lg" type="text">
  <i class="fa fa-check"></i>
</div>

<div class="input-icon input-icon-xl">
  <i class="fa fa-fw fa-user"></i>
  <input class="input-xl" type="text">
  <i class="fa fa-check"></i>
</div>

Form Groups

Related form controls can be grouped in a <fieldset>. An optional <legend> can be used to display a name for the group.

<fieldset>
  <legend>User</legend>
  ...
</fieldset>

Username

Password

Remember me

Validation

A form control can be made valid or invalid by adding the input-valid or input-invalid modifiers to the surrounding input-field.

<div class="input-field input-valid">
  <label>Valid</label>
  <input type="text">
</div>

<div class="input-field input-invalid">
  <label>Invalid</label>
  <input type="text">
</div>

Valid

Invalid

Never apply validation modifiers directly to a form control, as some components (e.g. input icons) wrap inputs with additional elements that won’t be able to inherit the correct styles.

<div class="input-field input-valid">
  <label>Valid with Icons</label>
  <div class="input-icon">
    <i class="fa fa-fw fa-user"></i>
    <input type="text">
    <i class="fa fa-fw fa-check"></i>
  </div>
</div>

<div class="input-field input-invalid">
  <label>Invalid with Icons</label>
  <div class="input-icon">
    <i class="fa fa-fw fa-user"></i>
    <input type="text">
    <i class="fa fa-fw fa-times"></i>
  </div>
</div>

Valid with Icons

Invalid with Icons