Checkbox
A checkbox input that allows users to select one or more options from a set.
Usage
The Checkbox component allows users to select one or more options from a set. It should be used within a CheckboxGroup for proper accessibility and form handling.
Basic Example
Multiple Checkboxes
Disabled State
Props
Checkbox Props
| Prop | Type | Default |
|---|---|---|
onHoverChange? | ((isHovering: boolean) => void) | - |
onHoverEnd? | ((e: HoverEvent) => void) | - |
onHoverStart? | ((e: HoverEvent) => void) | - |
inputRef? | RefObject<HTMLInputElement | null> | - |
name? | string | - |
excludeFromTabOrder? | boolean | - |
onFocusChange? | ((isFocused: boolean) => void) | - |
validate? | ((value: boolean) => true | ValidationError | null | undefined) | - |
isInvalid? | boolean | - |
isRequired? | boolean | - |
isReadOnly? | boolean | - |
isDisabled? | boolean | - |
isSelected? | boolean | - |
defaultSelected? | boolean | - |
isIndeterminate? | boolean | - |
validationBehavior? | "native" | "aria" | 'native' |
pressable? | boolean | true |
hitSlop? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs" | - |
focusable? | boolean | true |
value? | string | - |
layout? | LayoutOptions | - |
size? | "2xs" | "xs" | "sm" | Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "default", "2xs" | "xs" | "sm">> | - |
variant? | "outlined" | "muted" | - |
CheckboxGroup Props
| Prop | Type | Default |
|---|---|---|
layout? | LayoutOptions | - |
onFocusChange? | ((isFocused: boolean) => void) | - |
validate? | ((value: string[]) => true | ValidationError | null | undefined) | - |
isInvalid? | boolean | - |
isRequired? | boolean | - |
name? | string | - |
isReadOnly? | boolean | - |
isDisabled? | boolean | - |
value? | string[] | - |
validationBehavior? | "native" | "aria" | 'native' |
Edit on GitHub
Last updated on