Checkbox Preview

Checkboxes let people select multiple options from a group or switch a single option on or off.

To restrict someone to picking one option, try a radio group or dropdown. Checkboxes don't trigger an immediate change and require a submission step, like selecting a button. If you need a component that has immediate effect, try a switch.

Loading...
Open in CodeSandbox
Checkbox storybook
React guidance
Checkbox pattern
WAI guidance

Properties

as

“input”
Default:
none

checked

The controlled value for the checkbox.

boolean “mixed”
Default:
false

children

Checkboxes don’t support children. To add a label, use the label prop.

undefined
Default:
none

defaultChecked

Whether the checkbox should be rendered as checked by default.

boolean “mixed”
Default:
none

indicator

The checkbox, with the checkmark icon as its child when checked.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

input

Hidden input that handles the checkbox’s functionality.

This is the PRIMARY slot: all native properties specified directly on <Checkbox> will be applied to this slot, except className and style , which remain on the root slot.

({ as?: "input"; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; }, "children"> & { ...; })
Default:
none

label

The Checkbox’s label.

WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<LabelSlots, "root">, "required"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: "span"; } & Pick<...> & { ...; } & { ...; }> | null | undefined; size?: "small" | ... 2 more ... | undefined; weight?: ...
Default:
none

labelPosition

The position of the label relative to the checkbox indicator.

“before” “after”
Default:
“after”

onChange

Callback to be called when the checked state value changes.

((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void)
Default:
none

root

The root element of the Checkbox.

The root slot receives the className and style specified directly on the <Checkbox> . All other native props will be applied to the primary slot: input

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

shape

The shape of the checkbox indicator.

The circular variant is only recommended to be used in a tasks-style UI (checklist), since it otherwise could be confused for a RadioItem .

“circular” “square”
Default:
“square”

size

The size of the checkbox indicator.

“medium” “large”
Default:
“medium”