Leave Yamada UI a star
StarCheckbox is a component used for allowing users to select multiple values from multiple options.
Description
The HTML element to render.
Type
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 149 more ... | "view"Description
If true, the icon will be checked.
Type
booleanDefault
falseDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the icon will be indeterminate.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"primary"Description
If true, the checkbox will be initially checked.
Type
booleanDefault
falseDescription
Props for icon component.
Type
{
children: ReactElement<any, string | JSXElementConstructor<any>>
} & Omit<HTMLUIProps<"span">, "children">Description
id assigned to input.
Type
stringDescription
Props for input element.
Type
InputHTMLAttributes<HTMLInputElement>Description
If true, the checkbox will be checked.
Type
booleanDefault
falseDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the checkbox will be indeterminate.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
Props for label element.
Type
HTMLUIProps<"span">Description
The HTML name attribute used for forms.
Type
stringDescription
The callback invoked when the checkbox is blurred.
Type
FocusEventHandler<HTMLInputElement>Description
The callback invoked when the checked state changes.
Type
ChangeEventHandler<HTMLInputElement>Description
The callback invoked when the checkbox is focused.
Type
FocusEventHandler<HTMLInputElement>Description
If true, the checkbox will be selected when the Enter key is pressed.
Type
booleanDefault
falseDescription
The size of the Checkbox.
Type
"sm" | "md" | "lg"Default
"md"Description
The tab-index property of the underlying input element.
Type
numberDescription
The value to be used in the checkbox input.
Type
YDescription
The variant of the Checkbox.
Type
stringDescription
If true, the checkbox will be initially checked.
Type
booleanDefault
falseDescription
id assigned to input.
Type
stringDescription
If true, the checkbox will be checked.
Type
booleanDefault
falseDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the checkbox will be indeterminate.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
The HTML name attribute used for forms.
Type
stringDescription
The callback invoked when the checkbox is blurred.
Type
FocusEventHandler<HTMLInputElement>Description
The callback invoked when the checked state changes.
Type
ChangeEventHandler<HTMLInputElement>Description
The callback invoked when the checkbox is focused.
Type
FocusEventHandler<HTMLInputElement>Description
If true, the checkbox will be selected when the Enter key is pressed.
Type
booleanDefault
falseDescription
The tab-index property of the underlying input element.
Type
numberDescription
The value to be used in the checkbox input.
Type
YDescription
The CSS align-items property.
Type
UIValue<AlignItems>Description
The CSS flex-basis property.
Type
UIValue<number | "content" | "px" | "initial" | "inherit" | (string & {}) | "auto" | "max" | "min" | "1" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "2xl" | "lg" | "md" | "sm" | ... 68 more ... | "xs">Description
The initial value of the checkbox group.
Type
Y[]Description
The CSS flex-direction property.
Type
UIValue<FlexDirection>Description
The CSS flex-grow property.
Type
UIValue<FlexGrow>Description
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, input elements will receive checked attribute instead of isChecked.
This assumes, you're using native radio inputs.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
If provided, generate checkboxes based on items.
Type
CheckboxItem<Y>[]Default
'[]'Description
The CSS justify-content property.
Type
UIValue<JustifyContent>Description
The callback fired when any children checkbox is checked or unchecked.
Type
(value: Y[]) => voidDescription
The CSS flex-shrink property.
Type
UIValue<FlexShrink>Description
The value of the checkbox group.
Type
Y[]Description
The CSS flex-wrap property.
Type
UIValue<FlexWrap>Description
The initial value of the checkbox group.
Type
Y[]Description
If true, input elements will receive checked attribute instead of isChecked.
This assumes, you're using native radio inputs.
Type
booleanDefault
falseDescription
The callback fired when any children checkbox is checked or unchecked.
Type
(value: Y[]) => voidDescription
The value of the checkbox group.
Type
Y[]Edit this page on GitHub