Checkbox

A native browser checkbox input with label to toggle between two states. Similar to Switch input, internal checked and unchecked states can be set to any value, not just boolean true or false.

Has Universal Input API, with input value format, parse, normalize and event action handlers.

Props

Prop	Type	Default	Description
label	String		Text to use for checkbox, uses `id` if not given
id	String		Unique identifier, default is string created from React.useId()
onChange	Function		Input onChange callback(event, value: any, name?: string, self: object)
value	Any		Internal value for controlled checked or unchecked state
defaultValue	Any		Initial value for uncontrolled checked or unchecked state
checkedValue	Any	`true`	Internal value to assign to checked case
uncheckedValue	Any	`false`	Internal value to assign to unchecked case
readonly	Boolean		Whether to disable toggling state

Examples

Basic Usage

Example

LTR

Via Universal Input

LTR

Checkbox Label

LTR

Label

Checkbox Sizes

Input States

Disabled

LTR

disabled

Read only

LTR

readonly

LTR

Input Values

Checked Initially

LTR

Default Value

Controlled State

LTR

Controlled Value

Hybrid State (uncontrolled, but updates on `value` changes)

LTR

Uncontrolled Synced Value

For more native input type examples, see Universal Checkbox Input.

Input Select