--- layout: docs title: Form controls description: Give textual form controls like ``s and ``s an upgrade with custom styles, sizing, focus states, and more. group: forms toc: true --- ## Example {{< example >}} Email address Example textarea {{< /example >}} ## Sizing Set heights using classes like `.form-control-lg` and `.form-control-sm`. {{< example >}} {{< /example >}} ## Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. {{< example >}} {{< /example >}} ## Readonly Add the `readonly` boolean attribute on an input to prevent modification of the input's value. {{< example >}} {{< /example >}} ## Readonly plain text If you want to have `` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. {{< example >}} Email Password {{< /example >}} {{< example >}} Email Password Confirm identity {{< /example >}} ## File input {{< example >}} Default file input example Multiple files input example Disabled file input example Small file input example Large file input example {{< /example >}} ## Color Set the `type="color"` and add `.form-control-color` to the ``. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers. {{< example >}} Color picker {{< /example >}} ## Datalists Datalists allow you to create a group of ``s that can be accessed (and autocompleted) from within an ``. These are similar to `` elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for `` elements, their styling is inconsistent at best. Learn more about [support for datalist elements](https://caniuse.com/datalist). {{< example >}} Datalist example {{< /example >}} ## 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 ``s and `.form-text` component. {{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}} {{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}} `$form-file-*` are for file input. {{< scss-docs name="form-file-variables" file="scss/_variables.scss" >}}