Examples of standard form controls supported in an example form layout.
Most common form control, text-based input fields. Includes support for all HTML5 types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
Inputs will only be fully styled if their type
is properly declared.
To add integrated text or buttons before and/or after any text-based <input>
, check out the input group component.
Form control which supports multiple lines of text. Change rows
attribute as necessary.
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>
, you'll need to add the .disabled
class to the parent .radio
, .radio-inline
, .checkbox
, or .checkbox-inline
.
Use the .checkbox-inline
or .radio-inline
classes on a series of checkboxes or radios for controls that appear on the same line.
Should you have no text within the <label>
, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using aria-label
).
Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius
properties.
For <select>
controls with the multiple
attribute, multiple options are shown by default.