Switch

Basic switch

A switch is an alternative styling for <input type="checkbox">

Right-align

Button styling

Alert state

Use .bf-checkbox-alert on the wrapper to apply alert state styling.

Inactive state

Use .bf-checkbox-inactive on the wrapper instead of disabled when the user needs to know the switch exists but cannot be toggled — and why. See the checkbox docs for the full caveat: the class is styling + aria-disabled only — consumer must prevent the underlying <input> from actually changing state.

Hidden label text

Wrap the label text in .bf-checkbox-text and use .bf-checkbox-hidelabel on the outer wrapper.