addon
Description
The addon of the checkbox card.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortalCheckboxCard
CheckboxCard is a component used for allowing users to select multiple values from multiple options.
Props
CheckboxCardProps
addonProps
Description
Props for the footer of the checkbox card.
Type
CheckboxCardAddonPropschecked
Description
If true, the checkbox will be checked.
Type
booleanDefault
falsecolorScheme
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"defaultChecked
Description
If true, the checkbox will be initially checked.
Type
booleanDefault
falsedefaultIsChecked
DeprecatedDescription
If true, the checkbox will be initially checked.
Deprecated
Use defaultChecked instead.
Type
booleanDefault
falsedescription
Description
The body of the checkbox card.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortaldescriptionProps
Description
Props for the description of the checkbox card.
Type
CheckboxCardDescriptionPropsdisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseiconProps
Description
Props for the icon of the checkbox card.
Type
{
children: ReactElement<any, string | JSXElementConstructor<any>>
} & Omit<HTMLUIProps, "children">id
Description
id assigned to input.
Type
stringindeterminate
Description
If true, the checkbox will be indeterminate.
Type
booleanDefault
falseinputProps
Description
Props for input element.
Type
InputHTMLAttributes<HTMLInputElement>invalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisChecked
DeprecatedDescription
If true, the checkbox will be checked.
Deprecated
Use checked instead.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisIndeterminate
DeprecatedDescription
If true, the checkbox will be indeterminate.
Deprecated
Use indeterminate instead.
Type
booleanDefault
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required instead.
Type
booleanDefault
falselabel
Description
The label of the checkbox card.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortallabelProps
Description
Props for the label of the checkbox card.
Type
CheckboxCardLabelPropsname
Description
The HTML name attribute used for forms.
Type
stringonBlur
Description
The callback invoked when the checkbox is blurred.
Type
FocusEventHandler<HTMLInputElement>onChange
Description
The callback invoked when the checked state changes.
Type
ChangeEventHandler<HTMLInputElement>onFocus
Description
The callback invoked when the checkbox is focused.
Type
FocusEventHandler<HTMLInputElement>readOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falserequired
Description
If true, the form control will be required.
Type
booleanDefault
falseselectOnEnter
Description
If true, the checkbox will be selected when the Enter key is pressed.
Type
booleanDefault
falsesize
Description
The size of the CheckboxCard.
Type
"sm" | "md" | "lg"Default
"md"tabIndex
Description
The tab-index property of the underlying input element.
Type
numbervalue
Description
The value to be used in the checkbox input.
Type
Yvariant
Description
The variant of the CheckboxCard.
Type
"outline" | "subtle" | "surface"Default
"outline"withIcon
Description
If true, the icon will be displayed.
Type
booleanDefault
trueCheckboxCardGroupProps
addonProps
Description
Props for the footer of the checkbox card.
Type
CheckboxCardAddonPropsalign
Description
The CSS align-items property.
Type
UIValue<AlignItems>basis
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">defaultValue
Description
The initial value of the checkbox group.
Type
Y[]descriptionProps
Description
Props for the description of the checkbox card.
Type
CheckboxCardDescriptionPropsdirection
Description
The CSS flex-direction property.
Type
UIValue<FlexDirection>disabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falsegrow
Description
The CSS flex-grow property.
Type
UIValue<FlexGrow>invalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisNative
DeprecatedDescription
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
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required instead.
Type
booleanDefault
falseitems
Description
If provided, generate checkbox cards based on items.
Type
CheckboxCardItem<Y>[]Default
'[]'justify
Description
The CSS justify-content property.
Type
UIValue<JustifyContent>labelProps
Description
Props for the label of the checkbox card.
Type
CheckboxCardLabelPropsonChange
Description
The callback fired when any children checkbox is checked or unchecked.
Type
(value: Y[]) => voidreadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falserequired
Description
If true, the form control will be required.
Type
booleanDefault
falseshrink
Description
The CSS flex-shrink property.
Type
UIValue<FlexShrink>value
Description
The value of the checkbox group.
Type
Y[]withIcon
Description
If true, the icon will be displayed.
Type
booleanDefault
truewrap
Description
The CSS flex-wrap property.
Type
UIValue<FlexWrap>CheckboxCardLabelProps
contentProps
Description
The props for the label content.
Type
HTMLUIProps<"span">icon
Description
The icon of the checkbox card.
Type
ReactElement<any, string | JSXElementConstructor<any>>iconProps
Description
The props for the icon.
Type
HTMLUIPropswithIcon
Description
If true, the icon will be displayed.
Type
booleanDefault
trueCheckboxCardDescriptionProps
CheckboxCardAddonProps
Edit this page on GitHub