Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Input Form

Default Readytocook style.

Sizing

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

Select

Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles.

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

Disabled Forms

Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.

Disabled `fieldset` example.

Disabled input

Disabled select menu

Can't check this

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.

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.

File input

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.

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.

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.

Range Default

Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

Disabled

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

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

Steps

y default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

Example range

Input Group Basic

Add s outside the input group.

@example.com

Your vanity URL

https://example.com/users/

Example help text goes outside the input group.

$ .00

With textarea

Wrapping

Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.

Forms

Input Form

Default Readytocook style.

Sizing

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

Select

Custom <select> menus need only a custom class, .form-select to trigger the custom styles.

Set heights using classes like .form-select-lg and .form-select-sm.

Disabled Forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Disabled fieldset 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.

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.

File input

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.

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.

Datalists

Checksbox

Default checkbox.

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch.

Radios

Default checkbox.

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Toggle Buttons

Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements.

Checkbox toggle buttons

Radio toggle buttons

Outlined styles

Checkbox

Radio

Range Default

Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

Disabled

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

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

Steps

y default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5". Example range

Input Group Basic

Add s outside the input group.

Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap.

Checkboxes and radios

Add .mt-0 to the .form-check-input when there’s no visible text next to the input.

Multiple Inputs

While multiple <input>s are supported visually

Multiple Addons

While multiple <input>s are supported visually

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

Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles.

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

Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.

Disabled `fieldset` example.

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.

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.

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.

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.

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch.

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements.

Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

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

y default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

Example range

Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.

Add `.mt-0` to the `.form-check-input` when there’s no visible text next to the input.

While multiple `<input>`s are supported visually

While multiple `<input>`s are supported visually