form-control.md

layout: docs
title: Form controls
description: Give textual form controls like `<input>`s and `<textarea>`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 >}}

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

{{< example >}} {{< /example >}}

Readonly plain text

If you want to have <input readonly> 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 >}}

Color

{{< example >}} Color picker {{< /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 >}} Datalist example

{{< /example >}}