--- layout: default.html title: Forms description: Default form control styles. --- ## 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](buttons.html#file-buttons) instead.
<input type="number">
<input type="password">
<input type="radio">
<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. ```html ```
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-field` containers. ```html
```
### Input Groups Form controls and buttons can be grouped by wrapping them in `input-group` containers. ```html
```
### Input Addons To create an input addon, use ``. 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. ```html
$ .00
$ .00
$ .00
$ .00
$ .00
```
$ .00
$ .00
$ .00
$ .00
$ .00
### Form Groups Related form controls can be grouped in a `
`. An optional `` can be used to display a name for the group. ```html
User ...
```
Login
### 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. ```html
```