Examples of standard form controls supported in an example form layout.

Inputs

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.

Type declaration required

Inputs will only be fully styled if their type is properly declared.

{% highlight html %} {% endhighlight %}

Input groups

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

{% highlight html %} {% endhighlight %}

Checkboxes and radios

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.

Default (stacked)


{% highlight html %}
{% endhighlight %}

Inline checkboxes and radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.


{% highlight html %} {% endhighlight %}

Checkboxes and radios without label text

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).

{% highlight html %}
{% endhighlight %}

Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

{% highlight html %} {% endhighlight %}

For <select> controls with the multiple attribute, multiple options are shown by default.

{% highlight html %} {% endhighlight %}