Checkbox

import { Checkbox } from 'yarcl';

Email notificationsSMS notificationsSelect allDisabledLarge, success

<Checkbox defaultChecked>Email notifications</Checkbox>
<Checkbox indeterminate>Select all</Checkbox>
<Checkbox color="success" size="lg">Large, success</Checkbox>

• It’s a native <input type="checkbox">, so checked, defaultChecked and onChange work as usual.
• The box is sized from the size’s iconSize.
• indeterminate shows a mixed state; the browser clears it when the user toggles the box.

Props

Accepts every native <input> attribute except type, color and size.

Prop	Type	Default	Description
children	ReactNode		Label shown next to the box.
color	Colorconfig	config.defaults.color	Color of the checked box, from the colors config.
indeterminate	boolean		Shows a mixed state. Cleared by the browser when the user toggles the box.
size	Sizeconfig	config.defaults.size	Box size, from the sizes config (uses the size's iconSize).