Bootstrap 5 Forms Reference

Bootstrap 5 Forms facilitates the different form control styles, layout options, and custom components, in order to generate a wide variety of forms. The complete list of Forms Components is listed below with their brief description.

Overview

To make the user interface more presentable, use properties like padding, and margins as per the need.

Topic	Description
Form text	Overview Form Text sits below the form input elements to guide the user on how to fill in the input.
Disabled forms	In Bootstrap, you can easily disable input in a form and stop it from interacting by using the disabled attribute.

Form Controls

Form controls like <input>, <select>, <textarea> are the tags used to add custom styles, sizing, focus states to input field, select items, and text-areas, etc.

Topic	Description
Sizing	Form controls Sizing gives textual form controls on <input>, <select>, and <textarea> elements with custom styles, sizing, focus states, and more.
Disabled	Form controls Disabled are used to create a disabled input field.
Readonly	Form Controls Readonly is used to create a read-only input field.
Readonly plain text	Form Controls Readonly plain text is used to create a readonly input field as plaintext.
File input	Form controls File input provides customized ways to take the input of the files
Color	Form Control Color is used to set the color in the color type input field.
Datalists	Form controls datalists are used to create a group of options
Sass	Form controls can be used to change the default values provided for the Form controls by customizing scss file of Bootstrap 5.

Select

The Select form is used to create customized select elements with custom CSS that change the element’s initial appearance.

Topic	Description
Default	Select Default is used to provide the user with a list of options from which a single option can be selected.
Sizing	As the name suggests sizing means to adjust the size of an element relative to its parent with the help of height and width utilities(in px or in %).
Disabled	Select is a great component that helps us to add options that can be used inside a form as a field.
Sass	SASS can be used to change the default values provided for the select menus by customizing scss file.

Checks and Radios

This utility is used for creating checkboxes and radio without using CSS.

Topic	Description
Checks	A checks box is a square box that is ticked when it is activated.
Indeterminate	The :indeterminate pseudo-classes can be used by the Checkboxes while manually setting via JavaScript.
Radios	This is a feature provided to the user to choose from a predefined set of options.
Disabled	Checks and radios Disabled are used to make a checkbox/radio disabled, which means we won’t be able to click on it. Its appearance will also get muted.
Switches	Checks and radios Switches are used to transform the Checks and Radio Inputs into switches.
Default (stacked)	Checks and radios Default (stacked) is used to create a stack of checks and radios as a list.
Inline	bootstrap 5 Checks and radios Inline can be used to align the checkbox or radio horizontally in the same line.
Without labels	Checks and radios are a way to take boolean-type values easily.
Toggle buttons	Buttons Toggle states are used to change the button states.
Checkbox toggle buttons	There are three toggle states, the first is checked followed by unchecked and disabled which all can be done by adding or not adding some attributes.
Radio toggle buttons	Checks and Radios Radio Toggle Buttons use buttons instead of round-shaped radio buttons.
Outlined styles	Checks and radios with outlined styles for different looks, designs,s and background colors.
Sass	Bootstrap 5 provides various SASS variables that can be used to customize the variables by using different CSS properties.

Range

The Range is the limit slider between values that can vary.

Topic	Description
Disabled	Form controls Disabled are used to create a disabled input field.
Min and max	Range Min and Max attributes are used for altering the minimum and maximum values of the range.
Steps	Range Step is the factor by which the value of the range input will increment or decrement in one step.
Sass	SASS has a set of variables with default values that can be changed to customize the container.

Input group

Input Group allows extending the default form controls easily by incorporating text, buttons

Topic	Description
Wrapping	Input group Wrapping help to extend form controls by adding text, or buttons on either side of textual inputs.
Sizing	Input Group sizing helps us to create input groups of small, large, or default sizes.
Checkboxes and radios	Input group Checkboxes and radios are used to pace the radios and checkboxes within an input group’s addon instead of text.
Multiple inputs	Input Group Multiple Inputs help to take multiple inputs in an input group.
Multiple addons	Input group Multiple addons help to add multiple items in an input group which may include text, button, input, checkbox, radio, etc.
Button addons	Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
Buttons with dropdowns	Input group Buttons with dropdowns are used to display a button along with an input group.
Segmented buttons	Input group Segmented buttons used to segment dropdowns in input groups use the same general style as the dropdown button.
Custom forms	Input group Custom forms are extended form controls, used to collect specific information from visitors on your website.
Custom select	Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
Custom file input	Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
Sass	Bootstrap 5 provides the various variables in SASS that can be used to customize & manipulate the pre-defined Bootstrap classes.

Floating labels

Floating labels are the form labels that float over the input fields.

Topic	Description
Textareas	A Floating Label is used to give a beautiful-looking floating label to input elements
Selects	Floating labels Component Selects is used to give a floating label to input fields.
Layout	Floating labels Layout is useful when we are working with the grid system, so we have to place form elements within column classes.
Sass	Floating labels can be used to change the default values provided for the floating label by customizing SCSS file of bootstrap5.

Layout

Bootstrap 5 provides various form layouts that can structure from inline to horizontal to custom grid implementations with customized options.

Topic	Description
Forms	Layout forms provide control of the input field and custom positioning.
Utilities	Layout Utilities are used for creating mobile-friendly and responsive websites, there are many utility classes that can be used for various modifications such as showing, hiding, aligning, and spacing content.
Form grid	Layout Form Grid is used to create a complex form using grid classes.
Gutters	Gutters are the gaps between the columns in Bootstrap’s grid layout.
Horizontal form	Bootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls.
Horizontal form label sizing	Layout Horizontal form label sizing is used to set the label of the form input field in different sizes.
Column sizing	Layout Column sizing is used to set the width of the column element.
Auto-sizing	layout Auto-sizing dynamically calculates the size height, width, and positions of the elements can be adjusted automatically.
Inline forms	Layout Inline forms consist of a responsive horizontal layout.

Validation

The Validation facilitates form validation in HTML5, in order to provide valuable & actionable feedback to the users, along with supporting the default browser behaviors, custom styles, and JavaScript.

Topic	Description
Custom styles	It is used to add custom styles of bootstrap5 in your code.
Browser defaults	Validation Browser defaults provide feedback by browser default behaviors.
Server side	The validation Server side provides valuable, actionable feedback to your users by browser default behaviors or custom styles and JavaScript.
Supported elements	Validation is supported by various elements present in the form and you can use it to make sure the user knows about which field is mandatory.
Tooltips	Validation Tooltips are used to provide interactive textual hints to the user about the requirements to submit the form.
SASS	The SASS variables in Bootstrap 5 can be used to customize the pre-defined variables.
Mixins	The Mixins can be used to create the form validation feedback styles.
Map	The  _variables.scss provides the validation Sass map, in order to override or extend it to create the generate different or additional states.
Loop	This can be used to iterate the  $form-validation-states map values, in order to create the validation styles.
Customizing	The customization can be done with Validation states with the help of the $form-validation-states map.