Checkbox API

API documentation for Checkbox component

Checkbox#

Props#

Defines valid properties in Checkbox component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CheckboxInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CheckboxInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CheckboxPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CheckboxInstance) => ReactNode)	null	The children to render.
value	unknown	null	Value of the checkbox.
name	string	null	The name of the checkbox.
size	"small" \| "large" \| "normal"	null	Defines the size of the checkbox.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readOnly	boolean	false	When present, it specifies that an input field is read-only.
required	boolean	false	When present, it specifies that the element is required.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
inputId	string	null	Identifier of the underlying input element.
inputStyle	CSSProperties	null	Inline style of the input field.
inputClassName	string	null	Style class of the input field.
ariaLabel	string	null	Establishes a string value that labels the component.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Callback function that is called when the checkbox is focused.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Callback function that is called when the checkbox loses focus.
onCheckedChange	(event: CheckboxChangeEvent) => void	null	Callback fired when the checkbox's checked state changes.
checked	boolean	null	When present, it specifies the input's checked state.
defaultChecked	boolean	null	The default value for the input when not controlled by `checked` and `onCheckedChange` .
indeterminate	boolean	false	When present, it specifies input state as indeterminate.
trueValue	string \| number \| boolean	true	Value in checked state.
falseValue	string \| number \| boolean	false	Value in unchecked state.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Checkbox component.

name	type	default	description
checked	boolean	null	The checked state of the useCheckbox.
indeterminate	boolean	null	The indeterminate state of the useCheckbox.

Exposes#

Defines the methods and properties exposed by Checkbox component.

name	type	default	description
group	CheckboxGroupInstance	null	The group instance of the checkbox.
state	useCheckboxState	null	The state of the useCheckbox.
onChange	(event: useCheckboxChangeEvent) => void	null	Callback fired when the useCheckbox's checked state changes.

Events#

CheckboxChangeEvent

Event fired when the checkbox's checked state changes.

name	type	description
value	unknown	Value of the checkbox.
originalEvent	ChangeEvent	The original event that triggered the change.
checked	boolean	The checked state of the checkbox.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Checkbox component.

name	type	default	description
root	CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
input	CheckboxPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.
box	CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the box's DOM element.
icon	CheckboxPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the icon's DOM element.

Types#

Instance

Instance of Checkbox component.

values
ComponentInstance<CheckboxProps, CheckboxState, CheckboxExposes>

CheckboxGroup#

Props#

Defines valid properties in CheckboxGroup component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CheckboxGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CheckboxGroupInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CheckboxGroupPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CheckboxGroupInstance) => ReactNode)	null	The children to render.
value	unknown[]	null	Value of the checkbox group.
defaultValue	unknown[]	null	The default value of the checkbox group.
name	string	null	The name of the checkboxes.
disabled	boolean	false	When present, it specifies that the checkbox group should be disabled.
invalid	boolean	false	When present, it specifies that the checkbox group is invalid.
onValueChange	(event: CheckboxGroupValueChangeEvent) => void	null	Callback function that is called when the checkbox group value changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in CheckboxGroup component.

name	type	default	description
value	unknown[]	null	Value of the checkbox group.

Exposes#

Defines the methods and properties exposed by CheckboxGroup component.

name	type	default	description
state	CheckboxGroupState	null	The state of the checkbox group.
updateChange	(event: CheckboxGroupUpdateChangeEvent) => void	null	Updates the value of the checkbox group.

Events#

CheckboxGroupValueChangeEvent

Event fired when the checkbox group's value changes.

name	type	description
value	unknown[]	The value of the checkbox group.

CheckboxGroupUpdateChangeEvent

Used to update the checkbox group value.

name	type	description
value	unknown	Value of the checkbox.
originalEvent	ChangeEvent	The original event that triggered the change.
checked	boolean	The checked state of the checkbox.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Checkbox component.

name	type	default	description
root	CheckboxGroupPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CheckboxGroup component.

values
ComponentInstance<CheckboxGroupProps, CheckboxGroupState, CheckboxGroupExposes>

useCheckbox#

Props#

Defines valid properties in useCheckbox.

name	type	default	description
checked	boolean	null	When present, it specifies the input's checked state.
defaultChecked	boolean	null	The default value for the input when not controlled by `checked` and `onCheckedChange` .
indeterminate	boolean	false	When present, it specifies input state as indeterminate.
trueValue	string \| number \| boolean	true	Value in checked state.
falseValue	string \| number \| boolean	false	Value in unchecked state.
onCheckedChange	(event: useCheckboxChangeEvent) => void	null	Callback fired when the checkbox's checked state changes.

State#

Defines valid state in useCheckbox.

name	type	default	description
checked	boolean	null	The checked state of the useCheckbox.
indeterminate	boolean	null	The indeterminate state of the useCheckbox.

Exposes#

Defines the methods and properties exposed by useCheckbox.

name	type	default	description
state	useCheckboxState	null	The state of the useCheckbox.
onChange	(event: useCheckboxChangeEvent) => void	null	Callback fired when the useCheckbox's checked state changes.

Events#

useCheckboxChangeEvent

Event fired when the checkbox's checked state changes.

name	type	description
originalEvent	E	The original event that triggered the change.
checked	boolean	The checked state of the checkbox.

Types#

Instance

Instance of useCheckbox headless.

values
HeadlessInstance<useCheckboxProps, useCheckboxState, useCheckboxExposes>

On this page

Checkbox
Props
State
Exposes
Events
Interfaces
Types
CheckboxGroup
Props
State
Exposes
Events
Interfaces
Types
useCheckbox
Props
State
Exposes
Events
Types