Checkbox

Usage

import { Checkbox } from "@govtechmy/myds-react/checkbox";

export default () => <Checkbox />;

Examples

Size

Use the size prop to change the checkbox size!

Uncontrolled vs Controlled State

The checked prop allows you to control the state of the checkbox. If you don't provide the checked prop, the checkbox will be uncontrolled.

To manage the state of controlled checkboxes, you need to provide the checked prop and handle via onCheckedChange event listener.

Disabled

Checkbox can be disabled by setting the disabled prop to true. When disabled, the checkbox will not be interactive.

Indeterminate

Indeterminate state is used when a checkbox is part of a group of checkboxes and some of the checkboxes are checked while others are not. It is commonly used in a parent checkbox to indicate that some of its children checkboxes are checked.

Props

Checkbox