Checkbox

A control that toggles between two options, checked or unchecked.

Indeterminate

Indeterminate is an optional visual-only state between not checked and checked.

Option 1

Code Editor

Disabled

Disabled Checked

Disabled Indeterminate

Code Editor

Overflowing Text

The checkbox will remain aligned to the first line of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Code Editor

Text Styles

The checkbox will remain aligned, regardless of font size and line height.

Arbitrary text styles.

Code Editor

Label

Checkbox

Click me

Code Editor

Full Width

Expands the clickable area to full width.

Areas to the right of this text will be clickable.

Code Editor

Checkbox

A control that toggles between two options, checked or unchecked.

Default

Checked

No Label

Indeterminate

Disabled

Overflowing Text

Text Styles

Label

Full Width