Form Element
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Input
The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup>, and use <FormLabel> for the label.
Select
Customize the native <select> with custom CSS that changes the element’s initial appearance.
Textarea
Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
Sizing
Use size on <FormControl> and <Form.Select> to change the size of the input.
Readonly plain text
If you want to have readonly elements in your form styled as plain text, use the plaintext prop on FormControls to remove the default form field styling and preserve the correct margin and padding.
Input Shapes
Set different styles of input using .square-input, .rounded-input modifier classes.
Help text
Block-level help text in forms can be created using <Form.Text>. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
File browser
A custom file browser with change and remove function.
Checkbox and radio
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Checkbox and radio sizes
Use .form-check-lg, .form-check-sm
Multiple select Menu
The multiple attribute is also supported.
Switch
A switch has the markup of a custom checkbox but uses type="switch" to render a toggle switch. Switches also support the same customizable children as <FormCheck>.
Color
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.
Range
Create custom <input type="range"> controls with <FormRange>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.