Example#
Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.
{ {< example >} }
{ {< /example >} }
Sizing#
Set heights using classes like .form-control-lg and .form-control-sm.
{ {< example >} } { {< /example >} }
Form text#
Block-level or inline-level form text can be created using .form-text.
{ { < callout warning }}
Form text should be explicitly associated with the form control it relates to
using the aria-describedby attribute. This will ensure that assistive
technologies—such as screen readers—will announce this form text when the user
focuses or enters the control.
{ { < /callout }}
Form text below inputs can be styled with .form-text. If a block-level element
will be used, a top margin is added for easy spacing from the inputs above.
{ {< example >} }
{ {< /example >} }
Inline text can use any typical inline HTML element (be it a <span>,
<small>, or something else) with nothing more than the .form-text class.
{ {< example >} }
{ {< /example >} }
Disabled#
Add the disabled boolean attribute on an input to give it a grayed out
appearance, remove pointer events, and prevent focusing.
{ {< example >} } { {< /example >} }
Readonly#
Add the readonly boolean attribute on an input to prevent modification of the
input's value. readonly inputs can still be focused and selected, while
disabled inputs cannot.
{ {< example >} } { {< /example >} }
Readonly plain text#
If you want to have <input readonly> elements in your form styled as plain
text, replace .form-control with .form-control-plaintext to remove the
default form field styling and preserve the correct margin and padding.
{ {< example >} }
{ {< /example >} }
{ {< example >} }
{ {< /example >} }
File input#
{ {< example >} }
{ {< /example >} }
Color#
Set the type="color" and add .form-control-color to the <input>. We use
the modifier class to set fixed heights and override some inconsistencies
between browsers.
{ {< example >} } { {< /example >} }
Datalists#
Datalists allow you to create a group of <option>s that can be accessed (and
autocompleted) from within an <input>. These are similar to <select>
elements, but come with more menu styling limitations and differences. While
most browsers and operating systems include some support for <datalist>
elements, their styling is inconsistent at best.
Learn more about support for datalist elements.
{ {< example >} } { {< /example >} } ## CSS ### Sass variables `$input-*` are shared across most of our form controls (and not buttons). { { < scss-docs name="form-input-variables" file="scss/_variables.scss" }} `$form-label-*` and `$form-text-*` are for our `