Checkbox

Checkbox component is used in forms when a user needs to select multiple values from several options.

Props#

Checkbox Props#

`aria-describedby`

Type

string

`aria-invalid`

Type

true

`aria-label`

Description

Defines the string that labels the checkbox element.

Type

string

`aria-labelledby`

Description

Refers to the id of the element that labels the checkbox element.

Type

string

`colorScheme`

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"blue"

`icon`

Description

The checked icon to use

Type

React.ReactElement

Default

CheckboxIcon

`iconColor`

Description

The color of the checkbox icon when checked or indeterminate

Type

string

`iconSize`

Description

The size of the checkbox icon when checked or indeterminate

Type

string | number

`id`

Description

id assigned to input

Type

string

`inputProps`

Description

Additional props to be forwarded to the input element

Type

InputHTMLAttributes<HTMLInputElement>

`isChecked`

Description

If true, the checkbox will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type

boolean

`isDisabled`

Description

If true, the checkbox will be disabled

Type

boolean

`isFocusable`

Description

If true and isDisabled is passed, the checkbox will remain tabbable but not interactive

Type

boolean

`isIndeterminate`

Description

If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.

Type

boolean

`isInvalid`

Description

If true, the checkbox is marked as invalid. Changes style of unchecked state.

Type

boolean

`isReadOnly`

Description

If true, the checkbox will be readonly

Type

boolean

`isRequired`

Description

If true, the checkbox input is marked as required, and required attribute will be added

Type

boolean

`name`

Description

The name of the input field in a checkbox (Useful for form submission).

Type

string

`onChange`

Description

The callback invoked when the checked state of the Checkbox changes.

Type

((event: ChangeEvent<HTMLInputElement>) => void)

`onFocus`

Description

The callback invoked when the checkbox is focused

Type

((event: FocusEvent<HTMLInputElement, Element>) => void)

`size`

Type

"sm" | "md" | "lg"

Default

"md"

`spacing`

Description

The spacing between the checkbox and its label text

Type

SystemProps["marginLeft"]

Default

0.5rem

`tabIndex`

Description

The tab-index property of the underlying input element.

Type

number

`value`

Description

The value to be used in the checkbox input. This is the value that will be returned on form submission.

Type

string | number

`variant`

Description

Variants for Checkbox are not implemented in the default theme. You can extend the theme to implement them.

Type

string

CheckboxGroup Props#

`colorScheme`

Description

Color Schemes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`defaultValue`

Description

The initial value of the checkbox group

Type

(string | number)[]

`isDisabled`

Description

If true, all wrapped checkbox inputs will be disabled

Type

boolean

`isNative`

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs

Type

boolean

`onChange`

Description

The callback fired when any children Checkbox is checked or unchecked

Type

((value: (string | number)[]) => void)

`size`

Description

Sizes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`value`

Description

The value of the checkbox group

Type

(string | number)[]

`variant`

Description

Variants for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

Shared Style Props#

The following style props can be set on CheckboxGroup and they will be forwarded to all children Checkbox components.

Name	Type	Default	Description
colorScheme	`string`		The color of the checkbox when it is checked. This should be one of the color keys in the theme (e.g."green", "red").
children	`React.ReactNode`		The content of the checkbox group.
size	`sm`, `md`, `lg`	`md`	The size of the checkbox.
variant	`string`		The `variant` of the checkbox.

Props#

Checkbox Props#

`aria-describedby`

Type

string

`aria-invalid`

Type

true

`aria-label`

Description

Defines the string that labels the checkbox element.

Type

string

`aria-labelledby`

Description

Refers to the id of the element that labels the checkbox element.

Type

string

`colorScheme`

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"blue"

`icon`

Description

The checked icon to use

Type

React.ReactElement

Default

CheckboxIcon

`iconColor`

Description

The color of the checkbox icon when checked or indeterminate

Type

string

`iconSize`

Description

The size of the checkbox icon when checked or indeterminate

Type

string | number

`id`

Description

id assigned to input

Type

string

`inputProps`

Description

Additional props to be forwarded to the input element

Type

InputHTMLAttributes<HTMLInputElement>

`isChecked`

Description

If true, the checkbox will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type

boolean

`isDisabled`

Description

If true, the checkbox will be disabled

Type

boolean

`isFocusable`

Description

If true and isDisabled is passed, the checkbox will remain tabbable but not interactive

Type

boolean

`isIndeterminate`

Description

If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.

Type

boolean

`isInvalid`

Description

If true, the checkbox is marked as invalid. Changes style of unchecked state.

Type

boolean

`isReadOnly`

Description

If true, the checkbox will be readonly

Type

boolean

`isRequired`

Description

If true, the checkbox input is marked as required, and required attribute will be added

Type

boolean

`name`

Description

The name of the input field in a checkbox (Useful for form submission).

Type

string

`onChange`

Description

The callback invoked when the checked state of the Checkbox changes.

Type

((event: ChangeEvent<HTMLInputElement>) => void)

`onFocus`

Description

The callback invoked when the checkbox is focused

Type

((event: FocusEvent<HTMLInputElement, Element>) => void)

`size`

Type

"sm" | "md" | "lg"

Default

"md"

`spacing`

Description

The spacing between the checkbox and its label text

Type

SystemProps["marginLeft"]

Default

0.5rem

`tabIndex`

Description

The tab-index property of the underlying input element.

Type

number

`value`

Description

The value to be used in the checkbox input. This is the value that will be returned on form submission.

Type

string | number

`variant`

Description

Variants for Checkbox are not implemented in the default theme. You can extend the theme to implement them.

Type

string

CheckboxGroup Props#

`colorScheme`

Description

Color Schemes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`defaultValue`

Description

The initial value of the checkbox group

Type

(string | number)[]

`isDisabled`

Description

If true, all wrapped checkbox inputs will be disabled

Type

boolean

`isNative`

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs

Type

boolean

`onChange`

Description

The callback fired when any children Checkbox is checked or unchecked

Type

((value: (string | number)[]) => void)

`size`

Description

Sizes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`value`

Description

The value of the checkbox group

Type

(string | number)[]

`variant`

Description

Variants for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

Shared Style Props#

The following style props can be set on CheckboxGroup and they will be forwarded to all children Checkbox components.

Name	Type	Default	Description
colorScheme	`string`		The color of the checkbox when it is checked. This should be one of the color keys in the theme (e.g."green", "red").
children	`React.ReactNode`		The content of the checkbox group.
size	`sm`, `md`, `lg`	`md`	The size of the checkbox.
variant	`string`		The `variant` of the checkbox.

Edit this page on GitHub