Checkbox

A checkbox lets people select one or more options from a list.

#Default

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

Remember me

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

<Checkbox label="Remember me" />

#Checked

A checked checkbox shows the option is selected.

Send me updates

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

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

#Disabled

Use a disabled checkbox when the option is unavailable.

Unavailable optionUnavailable and selected

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.

EmailNotifications in the appMobile push

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

<Checkbox label="Email" defaultChecked />
<Checkbox label="Notifications in the app" defaultChecked />
<Checkbox label="Mobile push" />