--- name: bootstrap-forms description: This skill should be used when the user asks about Bootstrap forms, Bootstrap form controls, Bootstrap input fields, Bootstrap select, Bootstrap checkboxes, Bootstrap radio buttons, Bootstrap switches, Bootstrap range inputs, Bootstrap input groups, Bootstrap floating labels, Bootstrap form validation, Bootstrap form layout, how to create Bootstrap forms, needs help with form styling and validation in Bootstrap, wants to create a form, add form validation, style form inputs, make an inline form, add floating labels to inputs, create a login form, build a registration form, or validate user input. --- # Bootstrap 5.3 Forms Bootstrap provides comprehensive form styling including controls, layouts, validation states, and input groups. ## Form Controls ### Text Inputs ```html
``` ### Sizing To match input size with surrounding elements or emphasize important fields, use sizing classes. Use `.form-control-lg` for hero sections or primary CTAs. Use `.form-control-sm` for compact UIs like toolbars or inline forms. ```html ``` ### Disabled and Readonly Use `disabled` for fields users cannot interact with at all. Use `readonly` when values should be visible and selectable but not editable. Use `.form-control-plaintext` with `readonly` to display values without form styling. ```html ``` ### File Input ```html
``` ### Color Picker ```html
``` ### Textarea ```html
``` ### Help Text Use `.form-text` for supplemental instructions. Connect help text to inputs with `aria-describedby` so screen readers announce it when the input is focused: ```html
Must be 8+ characters with one uppercase letter.
``` When an input has both help text and validation feedback, reference both in `aria-describedby`: ```html
We'll never share your email.
Please enter a valid email address.
``` ## Select ```html ``` The `size` attribute displays multiple options without requiring `multiple` selection. Unlike `.form-select-lg` which changes visual scale, `size` controls how many options are visible at once. Use it for small option lists where showing all choices improves usability. ## Datalists Datalists provide autocomplete suggestions for text inputs. They combine the flexibility of free-text input with the convenience of predefined options. ```html ``` Connect the input to the datalist using the `list` attribute matching the datalist's `id`. Users can type freely or select from suggestions. Datalist styling is browser-native and varies across browsers—Bootstrap's `.form-control` styles the input, but the dropdown appearance is not customizable. ## Checkboxes and Radios ### Checkboxes ```html
``` ### Indeterminate Checkboxes Use the indeterminate state for checkboxes representing a "partially checked" condition. This is useful for "select all" patterns where some but not all child items are checked. The state must be set via JavaScript—there is no HTML attribute for it. ```html
``` ### Radios ```html
``` ### Switches Prefer switches over checkboxes for on/off settings that take effect immediately, like enabling notifications or toggling dark mode. Use checkboxes for multi-select options or when changes require a submit action. ```html
``` For iOS 17.4+ Safari, add the `switch` attribute to enable native haptic feedback: ```html
``` ### Inline ```html
``` ### Reverse Layout Use `.form-check-reverse` to position the input on the opposite side—label first, checkbox/radio second. This creates a right-aligned input style useful for settings interfaces or RTL layouts. ```html
``` ## Toggle Buttons Use `.btn-check` to create button-styled checkboxes and radios. Unlike standard form checks, toggle buttons use `.btn` classes on the label for a button appearance while maintaining checkbox/radio semantics. Use them for segmented controls, filter toggles, and option selectors. ### Checkbox Toggle ```html ``` ### Radio Toggle Group radio toggles with the `name` attribute for single-select behavior: ```html ``` ### Outlined Styles Use `.btn-outline-*` for a lighter, bordered appearance: ```html ``` ### Accessibility Toggle buttons are announced by screen readers as "checked"/"not checked" since they are fundamentally checkboxes or radios. This differs from button plugin toggles announced as "button"/"button pressed". Choose based on semantics—use toggle buttons when the control represents a true on/off or selection state. ## Range Range inputs provide a slider control. Use `.form-range` for consistent styling across browsers. ```html ``` ### Displaying the Current Value Use the `` element with JavaScript to show the current range value in real-time: ```html ``` The `oninput` event fires as the slider moves, providing immediate feedback. Place the `` element in the label or nearby for clear association. For more complex scenarios, use a separate event listener instead of inline handlers. ## Input Groups Use input groups to visually attach related elements to form controls. Common patterns include currency symbols, units of measurement, or action buttons alongside inputs. ### Basic ```html
@
@example.com
$ .00
``` ### With Buttons ```html
``` ### Sizing ```html
...
...
...
``` ### Wrapping Behavior Input groups wrap by default via `flex-wrap: wrap`. To keep all elements on a single line regardless of content width, add `.flex-nowrap`: ```html
@
``` ### Border Radius Limitations Hidden elements (using `.d-none` or `display: none`) in the first or last position break border-radius styling on adjacent elements. This is a known Bootstrap limitation. Workaround: move hidden elements outside the input group or use visibility utilities instead when the element needs to remain in the DOM. ### Segmented Dropdown Buttons Use `.dropdown-toggle-split` for split button dropdowns within input groups. This creates a separate dropdown trigger alongside a main action button: ```html
``` ## Floating Labels Use floating labels for a cleaner, more compact form design where labels animate into the input on focus. They work best in simple forms like login or signup. Avoid them when you need help text or complex validation messages alongside inputs. ```html
``` ### Input Groups with Floating Labels and Validation When combining floating labels with input groups and validation, special structure is required. Place `.form-floating` inside `.input-group`, add `.has-validation` to the input group, and place validation feedback outside `.form-floating` but inside `.input-group`: ```html
@
Please choose a username.
``` The `.has-validation` class ensures proper border-radius styling when validation feedback is present. Without it, the input group's visual appearance may break with validation states. ## Form Layout Choose your layout based on form complexity and available space. ### Vertical (Default) Use vertical layout for most forms—it's the simplest and works well on mobile. Labels stack above inputs for easy scanning. ```html
``` ### Horizontal Use horizontal layout when you have ample width and want a more compact appearance. Best for settings pages or admin panels with many short fields. ```html
``` ### Inline ```html
``` ### Grid Layout ```html
``` ## Accessibility Essentials Forms require proper accessibility attributes for screen reader support and WCAG compliance. ### Labels Always associate labels with inputs using `for` and `id` attributes: ```html ``` For visually hidden labels, use `.visually-hidden`: ```html ``` ### Help Text Connect help text to inputs with `aria-describedby`: ```html
Must be 8+ characters.
``` ### Validation States Mark invalid fields for assistive technology: ```html
Please enter a valid email.
``` ### Required Fields ```html ``` ## Validation ### Browser Default ```html
Looks good!
Please provide a first name.
``` ### Validation States ```html
Looks good!
Please provide a valid value.
``` ### Validation Tooltips Use `.valid-tooltip` and `.invalid-tooltip` as alternatives to feedback messages when you want positioned tooltip-style validation. Tooltips appear as floating messages positioned absolutely, requiring the parent element to have `position: relative`: ```html
Looks good!
Please provide a valid city.
``` Tooltips are useful when feedback messages would disrupt form layout or when you want a more prominent visual indicator. Use them consistently within a form—avoid mixing tooltips and feedback messages. ## Common Mistakes | Mistake | Problem | Fix | |---------|---------|-----| | Using placeholder as label | Not accessible, disappears on input | Always use `