Checkbox

A standard checkbox

{{ standard }}

Radio

A checkbox can be formatted as a radio element. This means it is an exclusive option.

{{ radio }}



{{ frequency }}


{{ example2 }}

Slider

A checkbox can be formatted to emphasize the current selection state

{{ slider }}



{{ throughput }}

Toggle

A checkbox can be formatted to show an on or off choice

{{ toggle }}

Read-only

A checkbox can be read-only and unable to change states

Checked

A checkbox can be checked

{{ checked }}

Indeterminate

A checkbox can be indeterminate

{{ indeter }}

Disabled

A checkbox can be read-only and unable to change states





{{ isEnabled ? 'Disable' : 'Enable' }}

Grouped Checkboxes

The indeterminate state can be used to represent a value that is neither checked or unchecked.

This can be useful with groups where a "master" checkbox, should display the selections of several other checkboxes

{{ master }}
{{ fruit1 }}
      
{{ fruit2 }}
      
{{ fruit3 }}
      

Attaching Events to other Elements

Checkbox can use the sm-checkbox-* behaviors to attach events easily to other activating elements. This defaults to toggling, but other behaviors can be used as well.

Toggle Check Uncheck