Skip to content
Home

Checkbox

Info
Demos
Properties
Events

Import

import { Checkbox } from '@dnb/eufemia'

Description

The Checkbox component is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices.

Demos

Unchecked Checkbox (default state)

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

Checked Checkbox, left label position

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

Checked Checkbox with error message

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

Checkbox with suffix

Code Editor
<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.

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

Disabled checkbox

Code Editor
<Checkbox checked disabled />

Indeterminate state (partially checked)

The checkbox offers a fully controlled indeterminate state.

Here is a indeterminate state working example.

Code Editor
<Checkbox label="Checkbox" indeterminate />
Code Editor
<Checkbox label="Checkbox" indeterminate size="large" />