---
title: Form controls
description: Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
toc: true
---

## 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 code={`
    Email address

    Example textarea

`} />

## Sizing

Set heights using classes like `.form-control-lg` and `.form-control-sm`.

<Example code={`

`} />

## Form text

Block-level or inline-level form text can be created using `.form-text`.

<Callout type="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 code={`Password

    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
  
`} />

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 code={`
    
      Password

        Must be 8-20 characters long.

`} />

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

<Example code={`
`} />

## 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 code={`<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>`} />

## 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 code={`
    Email

    Password

`} />

<Example code={`
    
      Email

      Password

      Confirm identity

`} />

## File input

<Example code={`
    Default file input example

    Multiple files input example

    Disabled file input example

    Small file input example

    Large file input example

`} />

## Color

Set the `type="color"` and add `.form-control-color` to the `<input>`. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.

<Example code={`Color picker
`} />

## 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](https://caniuse.com/datalist).

<Example code={`Datalist example

  `} />

## CSS

### Sass variables

`$input-*` are shared across most of our form controls (and not buttons).

<ScssDocs name="form-input-variables" file="scss/_variables.scss" />

`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.

<ScssDocs name="form-label-variables" file="scss/_variables.scss" />

<ScssDocs name="form-text-variables" file="scss/_variables.scss" />

`$form-file-*` are for file input.

<ScssDocs name="form-file-variables" file="scss/_variables.scss" />
