YouTip

## Bootstrap 5 Checkboxes and Radios In Bootstrap 5, checkboxes and radios are completely redesigned to replace the browser's default native form controls. By using custom CSS styles, Bootstrap ensures consistent rendering, sizing, and behavior across all modern browsers and devices. --- ## 1. Checkboxes Use checkboxes when you want users to select any number of options (zero, one, or multiple) from a predefined list. ### Structure and Classes * **`.form-check`**: The wrapper container that ensures proper margins, alignment, and spacing between the input and its label. * **`.form-check-input`**: Applied directly to the `` element to style the custom checkbox. * **`.form-check-label`**: Applied to the `` element to style the text label and align it with the checkbox. * **`checked`**: An optional HTML attribute used to set the default state of the checkbox to "selected". ### Code Example ```html

Option 1 (Default Checked)

Option 2

``` --- ## 2. Radio Buttons Use radio buttons when you want to limit the user's selection to only **one** option from a predefined list. To group radio buttons together, ensure they all share the same `name` attribute. ### Structure and Classes * Like checkboxes, radio buttons use the `.form-check` wrapper, `.form-check-input` on the ``, and `.form-check-label` on the ``. * Use the `disabled` attribute on the `` element to make a radio button unclickable. ### Code Example ```html

Option 1 (Selected)

Option 2

Option 3 (Disabled)

``` --- ## 3. Toggle Switches If you want to style a checkbox to look like a modern toggle switch, simply add the `.form-switch` class to the parent `.form-check` container. This is ideal for binary settings (e.g., On/Off, Enable/Disable, Dark Mode). ### Code Example ```html

Dark Mode

``` --- ## 4. Best Practices and Considerations When working with Bootstrap 5 checkboxes and radios, keep the following accessibility and usability guidelines in mind: * **Always associate Labels with Inputs**: Use the `id` attribute on the `` and match it with the `for` attribute on the ``. This allows users to click the label text to toggle the checkbox or radio button, which significantly improves usability on mobile devices. * **Semantic HTML**: Always use `` and `` rather than custom non-semantic elements to ensure screen readers can interpret the controls correctly. * **Layout Options**: By default, `.form-check` elements stack vertically. If you want them to appear side-by-side on the same line, add the `.form-check-inline` class to the `.form-check` wrapper.