Form

Checkbox

Storybook

This component is used to create a check box. The checkbox is a control that allows the user to select one or more options from a list.

Import

1import { Checkbox } from 'dd360-ds'

1import Checkbox from 'dd360-ds/Checkbox'

Usage

1import { Checkbox } from 'dd360-ds'
2
3<Checkbox />

Checked

This prop is used to set the initial state of the checkbox. If set to true, the checkbox will be checked. If set to false or not provided, the checkbox will appear unchecked.

1import { Checkbox } from 'dd360-ds'
2
3<Checkbox checked />

Indeterminate

This property is used to set the indeterminate state of the checkbox. If set to true, the checkbox will appear in an intermediate state between checked and unchecked.

1import { Checkbox } from 'dd360-ds'
2
3<Checkbox indeterminate />

Color

This prop is used to set the color of the checkbox. Any valid CSS color value can be set.

1import { Checkbox } from 'dd360-ds'
2
3<Checkbox color='#000' />

With control

You can use the FormControlLabel component to add a label to the checkbox and control its status

1import { FormControlLabel } from 'dd360-ds'
2
3<FormControlLabel control={<Checkbox />} label='Example' labelPlacement='top' />

API Reference