Checkbox
A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.
Preview
Code
Examples
Invalid
Preview
Code
Left
Preview
Code
Right
Preview
Code
Props
Name | Type | Default |
|---|---|---|
className | string | ((values: CheckboxRenderProps & { defaultClassName: string; }) => string) | — |
id | string | — |
name | string | — |
style | CSSProperties | ((values: CheckboxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
onFocus | ((e: FocusEvent<Element, Element>) => void) | — |
onBlur | ((e: FocusEvent<Element, Element>) => void) | — |
onChange | ((isSelected: boolean) => void) | — |
onKeyDown | ((e: KeyboardEvent) => void) | — |
onKeyUp | ((e: KeyboardEvent) => void) | — |
isDisabled | boolean | — |
autoFocus | boolean | — |
onFocusChange | ((isFocused: boolean) => void) | — |
onHoverStart | ((e: HoverEvent) => void) | — |
onHoverEnd | ((e: HoverEvent) => void) | — |
onHoverChange | ((isHovering: boolean) => void) | — |
slot | string | null | — |
excludeFromTabOrder | boolean | — |
value | string | — |
validationBehavior | "native" | "aria" | 'native' |
isIndeterminate | boolean | — |
defaultSelected | boolean | — |
isSelected | boolean | — |
isReadOnly | boolean | — |
isRequired | boolean | — |
isInvalid | boolean | — |
validate | ((value: boolean) => true | ValidationError | null) | — |
inputRef | RefObject<HTMLInputElement | null> | — |
description | string | — |
label | string | — |
textPosition | "left" | "right" | — |