bootstrap/site/content/docs/5.0/forms/form-control.md

layout, title, description, group, toc

layout	title	description	group	toc
docs	Form controls	Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.	forms	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 >}}

With icons

Wrap your form control in an element with .form-control-with-icon, then add a new element as a sibling to the form control with .form-control-icon. Place your icons within that new element. Icons will be automatically centered vertically and horizontally, but the sizing of them is up to you.

You can also add icons [to selects]({{< docsref "/forms/select#with-icons" >}}) and to [file inputs]({{< docsref "/forms/file#with-icons" >}}). Textareas are currently not supported.

Examples below are shown with Bootstrap Icons.

{{< example >}} Email address

{{< /example >}}

Spinners

You can also place any of Bootstrap's [spinners]({{< docsref "/components/spinners" >}}) within the .form-control-icon.

{{< example >}} Email address

Loading...

{{< /example >}}

Sizing

Add .form-control-sm or .form-control-lg to your .form-control and the .form-control-icon will automatically resize. However, the sizing of the icons themselves is up to you.

{{< example >}} Email address

{{< /example >}}

{{< example >}} Email address

{{< /example >}}