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"> |
|
<input type="color"> |
|
<input type="date"> |
|
<input type="email"> |
|
<input type="file">
File inputs aren’t supported. Use a file button instead. |
|
<input type="number"> |
|
<input type="password"> |
|
<input type="radio"> |
|
<input type="range"> |
|
<input type="search"> |
|
<input type="text"> |
|
<input type="time"> |
|
<progress></progress> |
|
<select> |
|
<textarea> |
You can change the size of most form controls with the input-small
and input-big
modifiers.
<input type="text" class="input-small" placeholder="Small">
<input type="text" placeholder="Default">
<input type="text" class="input-big" placeholder="Big">
<select class="input-small"><option>Item</option></select>
<select><option>Item</option></select>
<select class="input-big"><option>Item</option></select>
Disabled form controls look like this:
Read-only form controls look like this:
Form Control Spacing
For proper spacing of individual form controls, wrap them in input-single
containers.
<div class="input-single">
<label>Name</label>
<input type="text">
</div>
<div class="input-single">
<label>Password</label>
<input type="password">
</div>
<div class="input-single">
<label><input type="checkbox"> Remember me</label>
</div>
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-small
and input-addon-big
modifiers to change the size to match adjacent form controls.
<div class="input-group">
<span class="input-addon input-addon-small">$</span>
<input type="text" class="input-small">
<span class="input-addon input-addon-small">.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-big">$</span>
<input type="text" class="input-big">
<span class="input-addon input-addon-big">.00</span>
</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>
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-single
so labels will be styled as well, but modifiers can be applied directly to form controls as needed.
<div class="input-single input-valid">
<label>Valid</label>
<input type="text">
</div>
<div class="input-single input-invalid">
<label>Invalid</label>
<input type="text">
</div>