--- layout: default.html title: Forms description: Default form control styles. stylesheets: - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css --- ## 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](file-buttons.html) 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:
### Input Fields 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
### 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. ```html
```
Input icons can be used inside form groups. ```html
Location
```
Location
Use the `input-icon-[xs|sm|lg|xs]` modifiers to change the size of input icons to match form controls. ```html
```
### 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 A form control can be made valid or invalid by adding the `input-valid` or `input-invalid` modifiers to the surrounding `input-field`. ```html
```
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. ```html
```