Checkbox

A Checkbox lets users select and unselect options from a list.

Table of Contents

Used for this

To let users compare options from a list and select all, any, or none of those items
To turn a single option on or off

Not for this

To give the user a mutually exclusive choice, use the Radio component instead
To let users activate an option that takes effect immediately, use a Toggle instead

How to use it

A Checkbox’s label is part of its touch target.

A disabled Checkbox prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not be read aloud by a screenreader.

Checkbox labels can be hidden.

Use Hint to add more context to the label.

If the children of a Checkbox have different states (some on, some off) the parent Checkbox will show an indeterminate state.

Checkbox labels are bold by default, but they can be regular weight too.

Show success, warning, and danger validation messages with the Message component.

Name8.42.0•View source•View on npm
Installnpm install @zendeskgarden/react-forms
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { Checkbox, Field, Hint, Label, Message } from '@zendeskgarden/react-forms'

Extends InputHTMLAttributes<HTMLInputElement>

Prop name	Type	Default	Description
indeterminate	boolean	–	Sets the checkbox state to indeterminate
isCompact	boolean	–	Applies compact styling

Extends HTMLAttributes<HTMLDivElement>

Prop name	Type	Default	Description
id	string	–	Sets the field ID and the prefix for the generated label, input, and hint IDs

Extends HTMLAttributes<HTMLDivElement>

Extends LabelHTMLAttributes<HTMLLabelElement>

Prop name	Type	Default	Description
isRegular	boolean	–	Applies regular (non-bold) font weight

Extends HTMLAttributes<HTMLDivElement>

Prop name	Type	Default	Description
validation	VALIDATION	–	Applies validation state styling