Skip to contentWolf-Rayet

Checkbox

A checkbox is an input control that allows a user to select one or more options from a number of choices.

#Default

Use a checkbox to let people turn an option on or off.

import { Checkbox } from '@wolf-rayet/react';

<Checkbox label="Remember me" />

#Checked

A checked checkbox shows the option is selected.

import { Checkbox } from '@wolf-rayet/react';

<Checkbox label="Send me updates" defaultChecked />

#Disabled

Use a disabled checkbox when the option is unavailable.

import { Checkbox } from '@wolf-rayet/react';

<Checkbox label="Unavailable option" isDisabled />
<Checkbox label="Unavailable and selected" isDisabled defaultChecked />

#Group

Use a group of checkboxes when people can choose more than one option.

import { Checkbox } from '@wolf-rayet/react';

<Checkbox label="Email" defaultChecked />
<Checkbox label="In-product notifications" defaultChecked />
<Checkbox label="Mobile push" />