Checkbox

Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するための使用されるコンポーネントです。

Props

CheckboxProps

説明

The visual color appearance of the component.

タイプ

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

デフォルト

primary

説明

If true, the checkbox will be initially checked.

タイプ

boolean

デフォルト

false

説明

Props for icon component.

タイプ

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

説明

id assigned to input.

タイプ

string

説明

Props for input element.

タイプ

InputHTMLAttributes<HTMLInputElement>

説明

If true, the checkbox will be checked.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

説明

If true, the checkbox will be indeterminate.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

説明

Props for label element.

タイプ

HTMLUIProps<"span">

説明

The HTML name attribute used for forms.

タイプ

string

説明

The callback invoked when the checkbox is blurred.

タイプ

FocusEventHandler<HTMLInputElement>

説明

The callback invoked when the checked state changes.

タイプ

ChangeEventHandler<HTMLInputElement>

説明

The callback invoked when the checkbox is focused.

タイプ

FocusEventHandler<HTMLInputElement>

説明

The size of the Checkbox.

タイプ

"sm" | "md" | "lg"

デフォルト

md

説明

The tab-index property of the underlying input element.

タイプ

number

説明

The value to be used in the checkbox input.

タイプ

Y

説明

The variant of the Checkbox.

タイプ

string

CheckboxIconProps

タイプ

"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "g" | "p" | "big" | "link" | "small" | "sub" | "sup" | "label" | "a" | "abbr" | "address" | "area" | "article" | ... 148 more ... | "view"

説明

If true, the icon will be checked.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

説明

If true, the icon will be indeterminate.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

UseCheckboxProps

説明

If true, the checkbox will be initially checked.

タイプ

boolean

デフォルト

false

説明

id assigned to input.

タイプ

string

説明

If true, the checkbox will be checked.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

説明

If true, the checkbox will be indeterminate.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

説明

The HTML name attribute used for forms.

タイプ

string

説明

The callback invoked when the checkbox is blurred.

タイプ

FocusEventHandler<HTMLInputElement>

説明

The callback invoked when the checked state changes.

タイプ

ChangeEventHandler<HTMLInputElement>

説明

The callback invoked when the checkbox is focused.

タイプ

FocusEventHandler<HTMLInputElement>

説明

The tab-index property of the underlying input element.

タイプ

number

説明

The value to be used in the checkbox input.

タイプ

Y

CheckboxGroupProps

説明

The CSS align-items property.

タイプ

(string & {}) | "center" | "initial" | "inherit" | "baseline" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "start" | ... 7 more ... | ((theme: StyledTheme) => UIValue<...>)

説明

The CSS flex-basis property.

タイプ

number | (string & {}) | "content" | "px" | "initial" | "inherit" | "auto" | "max" | "min" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "revert" | "revert-layer" | "unset" | ... 72 more ... | ((theme: StyledTheme) => UIValue<...>)

説明

The CSS flex-direction property.

タイプ

"initial" | "inherit" | "row" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse" | Partial<Record<Breakpoint, FlexDirection | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

説明

The CSS flex-grow property.

タイプ

(string & {}) | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | Partial<Record<Breakpoint, FlexGrow | [FlexGrow, FlexGrow]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

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

タイプ

boolean

デフォルト

false

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

説明

If provided, generate checkboxes based on items.

タイプ

CheckboxItem<Y>[]

デフォルト

'[]'

説明

The CSS justify-content property.

タイプ

(string & {}) | "left" | "right" | "center" | "initial" | "inherit" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | ... 9 more ... | ((theme: StyledTheme) => UIValue<...>)

説明

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

タイプ

(value: Y[]) => void

説明

The CSS flex-shrink property.

タイプ

(string & {}) | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | Partial<Record<Breakpoint, FlexShrink | [FlexShrink, FlexShrink]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

説明

The value of the checkbox group.

タイプ

Y[]

説明

The CSS flex-wrap property.

タイプ

"initial" | "inherit" | "wrap" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<Breakpoint, FlexWrap | [FlexWrap, FlexWrap]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

UseCheckboxGroupProps

説明

The initial value of the checkbox group.

タイプ

Y[]

説明

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

タイプ

boolean

デフォルト

false

説明

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

タイプ

(value: Y[]) => void

説明

The value of the checkbox group.

タイプ

Y[]

GitHubでこのページを編集する

前Radio 次Switch