Checkbox & Radio
Default Checks
The Default Checks example shows how to use the .form-check-input class to create standard checkbox inputs with proper spacing and alignment.
Disabled
The Disabled example demonstrates how to use the disabled attribute on form controls, preventing user interaction while maintaining a consistent style.
Sizing
The Sizing example showcases how to adjust the size of form controls using classes like .form-check-sm and .form-check-lg for a more compact or larger appearance.
Radio Buttons
The Radio Buttons example demonstrates how to use .form-check-input to create selectable options where only one choice can be selected at a time.
Disabled
The Disabled example shows how to use the disabled attribute with .form-check-input to create non-selectable checkboxes or radio buttons.
Sizing
The Sizing example demonstrates how to use .form-control-sm and .form-control-lg to create smaller or larger input fields for better UI adaptability.
Indeterminate
The Indeterminate example shows how to create a checkbox with an indeterminate state using JavaScript, providing a visual cue for a partially selected option.
Checkbox Color Variants
The Color Variants example demonstrates how to use the .form-check-* classes to apply different colors to checkboxes and radio buttons for better visual distinction.
Radio Color Variants
The Color Variants example demonstrates how to use the .form-check-* classes to apply different colors to checkboxes and radio buttons for better visual distinction.
Switches
The Switches example shows how to use the .form-switch class to create a toggle-style checkbox for a modern and interactive user experience.
Switches Disabled
The Disabled Switch example demonstrates how to use the .form-switch and disabled attributes to create a non-interactive toggle switch.
Switches Sizes
The Switch Sizes example demonstrates various switch sizes using the .form-switch class. Use .form-check-sm for a smaller switch size.
Switches Color Variants
The Switch Color Variants example demonstrates how to apply different colors to switches using classes like .form-switch-* for a styled secondary switch.
Inline
The Inline Checkboxes & Radios example shows how to use the .form-check-inline class to display checkboxes or radio buttons in a single horizontal line.
Reverse
The Reverse Checkboxes & Radios example demonstrates how to use the .form-check-reverse class to position the label on the left side of the checkbox or radio button.
Without labels
The Without Labels example shows how to use checkboxes and radio buttons without labels, ensuring a minimal and clean design while maintaining accessibility.
Checkbox toggle buttons
The Checkbox Toggle Buttons example demonstrates how to use checkboxes styled as buttons for an interactive and user-friendly selection experience.
Radio toggle buttons
The Radio Toggle Buttons example showcases how to style radio buttons as toggle buttons, allowing users to select a single option in a visually appealing way.
Checkbox With Icons
The Checkbox With Icons example uses the .btn-check class to create toggle-style checkboxes with icon-based buttons for a more interactive and visually appealing selection.
Radio With Icons
The Radio With Icons example uses the .btn-check class to create stylish radio buttons with icons, enhancing the user experience with a more interactive selection style.
Payment Method Group
The Radio With Payment Method Group example uses the .form-check-input class to create structured and accessible radio buttons with payment method icons for easy selection.
Payment Method Group
The Radio With Payment Method Group example uses the .form-check-input class to create structured and accessible radio buttons with payment method icons for easy selection.