Checkbox

Checkbox is a component used for allowing users to select multiple values from multiple options.

Source @yamada-ui/checkbox

Props

CheckboxProps

Description

If true, the checkbox will be checked.

Type

boolean

Default

false

Description

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

boolean

Default

false

Description

If true, the checkbox will be initially checked.

Deprecated

Use defaultChecked instead.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Type

boolean

Default

false

Description

Props for icon component.

Type

{
children: ReactElement<any, string | JSXElementConstructor<any>>
} & Omit<HTMLUIProps, "children">

Description

id assigned to input.

Type

string

Description

If true, the checkbox will be indeterminate.

Type

boolean

Default

false

Description

Props for input element.

Type

InputHTMLAttributes<HTMLInputElement>

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, the checkbox will be checked.

Deprecated

Use checked instead.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the checkbox will be indeterminate.

Deprecated

Use indeterminate instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

Description

The label of the checkbox.

Type

type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal

Description

Props for label element.

Type

HTMLUIProps<"span">

Description

The HTML name attribute used for forms.

Type

string

Description

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 form control will be readonly.

Type

boolean

Default

false

Description

If true, the form control will be required.

Type

boolean

Default

false

Description

If true, the checkbox will be selected when the Enter key is pressed.

Type

boolean

Default

false

Description

The size of the Checkbox.

Type

"sm" | "md" | "lg"

Default

"md"

Description

The tab-index property of the underlying input element.

Type

number

Description

The value to be used in the checkbox input.

Type

Y

Description

The variant of the Checkbox.

Type

string

CheckboxGroupProps

Description

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

If true, the form control will be disabled.

Type

boolean

Default

false

Description

The CSS flex-grow property.

Type

UIValue<FlexGrow>

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs.

Deprecated

It will be deprecated in version 2.0.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

Description

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

Description

If true, the form control will be readonly.

Type

boolean

Default

false

Description

If true, the form control will be required.

Type

boolean

Default

false

Description

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>

CheckboxIconProps

Description

The HTML element to render.

Type

keyof ReactDOM

Description

If true, the icon will be checked.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Type

boolean

Default

false

Description

If true, the icon will be indeterminate.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, the icon will be checked.

Deprecated

Use checked instead.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the icon will be indeterminate.

Deprecated

Use indeterminate instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Type

boolean

Default

false

Description

If true, the form control will be required.

Type

boolean

Default

false

UseCheckboxProps

Description

If true, the checkbox will be checked.

Type

boolean

Default

false

Description

If true, the checkbox will be initially checked.

Type

boolean

Default

false

Description

If true, the checkbox will be initially checked.

Deprecated

Use defaultChecked instead.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Type

boolean

Default

false

Description

id assigned to input.

Type

string

Description

If true, the checkbox will be indeterminate.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, the checkbox will be checked.

Deprecated

Use checked instead.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the checkbox will be indeterminate.

Deprecated

Use indeterminate instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

Description

The HTML name attribute used for forms.

Type

string

Description

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 form control will be readonly.

Type

boolean

Default

false

Description

If true, the form control will be required.

Type

boolean

Default

false

Description

If true, the checkbox will be selected when the Enter key is pressed.

Type

boolean

Default

false

Description

The tab-index property of the underlying input element.

Type

number

Description

The value to be used in the checkbox input.

Type

Y

UseCheckboxGroupProps

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.

Deprecated

It will be deprecated in version 2.0.

Type

boolean

Default

false

Description

The callback fired when any children checkbox is checked or unchecked.

Type

(value: Y[]) => void

Description

The value of the checkbox group.

Type

Y[]

Edit this page on GitHub

PreviousRadioCard NextCheckboxCard