#Checkbox

#Import

import { Checkbox } from '@dnb/eufemia'

#Description

The Checkbox component is displayed as a square box that is ticked (checked) when activated. Checkboxes let users select one or more options from a limited number of choices.

#When to use Checkbox vs Eufemia Forms

Classic form components like this one are presentational controls. They handle the styling, sizing, icons, and basic events, while you manage their value, validation, and error handling yourself.

For most data input and forms situations, use Eufemia Forms fields instead. They build on these same components, but add data handling, validation, and error messages through the surrounding Form.Handler. Browse the field components to find the one that matches your data.

Reach for a classic component when you need it standalone outside of a form context, or when you handle the value and validation yourself.

The Eufemia Forms equivalent of a single Checkbox is Field.Boolean, while Field.ArraySelection handles selecting multiple values with checkboxes.

#Relevant links

• Figma
• Source code
• Docs code

#Accessibility

Checkbox components use semantic <input type="checkbox"> elements, ensuring full keyboard accessibility (Space to toggle) and proper state announcement by screen readers. Labels are properly associated using htmlFor attributes.

#Related components

Checkbox is part of the Input category. Other components for similar needs:

• Autocomplete — to help people find and choose from matching suggestions as they type.
• DatePicker — when people need to choose one date or a date range.
• Dropdown — when people need to choose one option from a list.
• Filter — to help people narrow down a list or data set.
• FormLabel — to name an input, control, or form-related field.
• Input — when people need to enter a short line of text.

See all in Input →

#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

<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 checked disabled />

#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" />