stringCheckbox
Checkbox component is used in forms when a user needs to select multiple values from several options.
Props#
Checkbox Props#
aria-describedby
aria-describedbyType
aria-invalid
aria-invalidType
truearia-label
aria-labelDescription
Defines the string that labels the checkbox element.
Type
stringaria-labelledby
aria-labelledbyDescription
Refers to the id of the element that labels the checkbox element.
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"icon
iconDescription
The checked icon to use
Type
React.ReactElementDefault
CheckboxIconiconColor
iconColorDescription
The color of the checkbox icon when checked or indeterminate
Type
stringiconSize
iconSizeDescription
The size of the checkbox icon when checked or indeterminate
Type
string | numberid
idDescription
id assigned to input
Type
stringinputProps
inputPropsDescription
Additional props to be forwarded to the input element
Type
InputHTMLAttributes<HTMLInputElement>isChecked
isCheckedDescription
If true, the checkbox will be checked.
You'll need to pass onChange to update its value (since it is now controlled)
Type
booleanisDisabled
isDisabledDescription
If true, the checkbox will be disabled
Type
booleanisFocusable
isFocusableDescription
If true and isDisabled is passed, the checkbox will
remain tabbable but not interactive
Type
booleanisIndeterminate
isIndeterminateDescription
If true, the checkbox will be indeterminate.
This only affects the icon shown inside checkbox
and does not modify the isChecked property.
Type
booleanisInvalid
isInvalidDescription
If true, the checkbox is marked as invalid.
Changes style of unchecked state.
Type
booleanisReadOnly
isReadOnlyDescription
If true, the checkbox will be readonly
Type
booleanisRequired
isRequiredDescription
If true, the checkbox input is marked as required,
and required attribute will be added
Type
booleanname
nameDescription
The name of the input field in a checkbox (Useful for form submission).
Type
stringonChange
onChangeDescription
The callback invoked when the checked state of the Checkbox changes.
Type
((event: ChangeEvent<HTMLInputElement>) => void)onFocus
onFocusDescription
The callback invoked when the checkbox is focused
Type
((event: FocusEvent<HTMLInputElement, Element>) => void)size
sizeType
"sm" | "md" | "lg"Default
"md"spacing
spacingDescription
The spacing between the checkbox and its label text
Type
SystemProps["marginLeft"]Default
0.5remtabIndex
tabIndexDescription
The tab-index property of the underlying input element.
Type
numbervalue
valueDescription
The value to be used in the checkbox input. This is the value that will be returned on form submission.
Type
string | numbervariant
variantDescription
Variants for Checkbox are not implemented in the default theme. You can extend the theme to implement them.
Type
stringCheckboxGroup Props#
colorScheme
colorSchemeDescription
Color Schemes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
defaultValueDescription
The initial value of the checkbox group
Type
(string | number)[]isDisabled
isDisabledDescription
If true, all wrapped checkbox inputs will be disabled
Type
booleanisNative
isNativeDescription
If true, input elements will receive
checked attribute instead of isChecked.
This assumes, you're using native radio inputs
Type
booleanonChange
onChangeDescription
The callback fired when any children Checkbox is checked or unchecked
Type
((value: (string | number)[]) => void)size
sizeDescription
Sizes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringvalue
valueDescription
The value of the checkbox group
Type
(string | number)[]variant
variantDescription
Variants for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringShared 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. |