Checkbox

Checkboxes are a stylized input[type="checkbox"] with controllable checked/unchecked states. Checkbox Design Guidelines.

Edit the code below to see your changes live!

API

Supports all native <input /> element attributes.

Checkbox

Prop Name
Type
Default
Description
label *string | CheckboxLabel

Label to display next to a <Code>Checkbox</Code> component.

hiddenLabelboolean

Renders Checkbox with a visually hidden label, retains accessibility for screen readers.

isIndeterminateboolean

Styles and sets the checkbox into a indeterminate state. Note that the checked prop will take precedence over isIndeterminate.

descriptionstring | CheckboxDescription

See below for usage.

Props ending with * are required

Checkbox[CheckboxDescription]

Prop Name
Type
Default
Description
text *string

Description to display below Label

linkCheckboxDescriptionLink

See below for usage.

Props ending with * are required

Prop Name
Type
Default
Description
externalboolean

Shows an external icons when the external flag is set and target="_blank".

hrefstring

Same as a HTML anchor href attribute.

textstring

Link text to display.

targetstring

Same as a HTML anchor target attribute.

Props ending with * are required

Indeterminate

Checkboxes support isIndeterminate passed as a prop to show a combined state of partially selected checkboxes.

Edit the code below to see your changes live!

Description

Checkboxes support description passed as a prop, which contains a text and an optional link.

I am a CheckboxDescription. Learn more

I am a string description.

Edit the code below to see your changes live!

Beta