Skip to content
Home

Checkbox#

Info
Demos
Properties
Events

Demos#

Unchecked Checkbox (default state)#

<Checkbox label="Checkbox" onChange={(e) => console.log(e)} />

Checked Checkbox, left label position#

<Checkbox
  label="Label"
  labelPosition="left"
  checked
  onChange={({ checked }) => console.log(checked)}
/>

Checked Checkbox with error message#

Error message
<Checkbox label="Checkbox" checked status="Error message" />

Checkbox with suffix#

<Checkbox
  label="Checkbox"
  checked
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>

With different sizes#

As for now, there are two sizes. medium is the default size.

<Checkbox size="medium" label="Medium" right="large" checked />
<Checkbox size="large" label="Large" checked />

Prevent changing the state of the checkbox#

You can prevent the state of the checkbox from changing by calling preventDefault on the onClick event.

<Checkbox
  label="Checkbox"
  onClick={(event) => {
    event.preventDefault()
  }}
  onChange={({ checked }) => console.log('onChange', checked)}
/>

Disabled checkbox#

<Checkbox label="Unchecked" disabled right="large" />
<Checkbox label="Checked" checked disabled right="large" />
<Checkbox label="Indeterminate" indeterminate disabled />
<Section surface="dark" innerSpace top>
  <Checkbox label="Unchecked on dark" disabled right="large" />
  <Checkbox label="Checked on dark" checked disabled right="large" />
  <Checkbox label="Indeterminate on dark" indeterminate disabled />
</Section>

Indeterminate state (partially checked)#

The checkbox offers a fully controlled indeterminate state.

Here is an indeterminate state working example.

<Checkbox label="Checkbox" indeterminate />

<Checkbox label="Checkbox" indeterminate size="large" />
Suggest an edit