Checkbox

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

    SourceTheme source@chakra-ui/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

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
StringOrNumber[]

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: StringOrNumber[]) => 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
StringOrNumber[]

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.

NameTypeDefaultDescription
colorSchemestringThe color of the checkbox when it is checked. This should be one of the color keys in the theme (e.g."green", "red").
childrenReact.ReactNodeThe content of the checkbox group.
sizesm, md, lgmdThe size of the checkbox.
variantstringThe variant of the checkbox.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel