Toggle Buttons

Button-styled checkboxes and radios using the .btn-check class.

Checkbox Toggle Buttons

Use checkbox toggles for independent on/off options.

Single toggle Checked Disabled

Radio Toggle Buttons

Use radio toggles for mutually exclusive options. Group with the name attribute.

Checked Radio Radio Disabled

Outlined Styles

Use .btn-outline-* classes for a lighter, bordered appearance.

Toggle primary Checked secondary

Success radio Danger radio Warning radio

Practical Example: View Selector

A segmented control for selecting a view mode, commonly used in toolbars.

List Grid Compact

Practical Example: Filter Tags

Multiple checkbox toggles for filtering content by category.

All Design Development Marketing Analytics

Accessibility Note

Toggle buttons are announced by screen readers as "checked"/"not checked" since they are fundamentally checkboxes or radios. This differs from button plugin toggles which are announced as "button"/"button pressed".