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:

Form Control Spacing

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 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></option></select>
</div>

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

<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

Form controls can be made valid or invalid using the input-valid and input-invalid modifiers. It’s better to apply modifiers to the surrounding input-field so labels will be styled as well, but modifiers can be applied directly to form controls as needed.

<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