Checkbox

A checkbox component that can render boolean and intermediate states in multiple visual styles.

Installation

import { Checkbox } from 'uxp/components';

Signature

const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<ICheckboxInstanceProps> & ICheckboxProps>

Examples

<Checkbox
    checked={checked}
    onChange={(isChecked) => setChecked(isChecked)}
    label='Are you sure'
/>

<Checkbox
    checked='intermediate'
    onChange={(isChecked) => setChecked(isChecked)}
    label='Partial selection'
    type="switch-box"
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
checked	CheckboxState	Yes	-	-
onChange	(checked: boolean) => void	Yes	-	-
label	string| React.ReactNode	No	-	-
isValid	boolean	No	-	-
inputAttr	{ [key: string]: string | boolean }	No	-	-
type	ICheckboxType	No	-	-
className	string	No	-	-
labelStyles	React.CSSProperties	No	-	-
tabIndex	number	No	-	-
readonly	boolean	No	-	-
spacingMode	SpacingMode	No	-	-

Ref Handlers

Available methods through ref:

Method	Type	Description
focus	() => void	-

Related Types

• ICheckboxProps

• CheckboxState

• ICheckboxType

• SpacingMode

• ICheckboxInstanceProps