Checkbox

Animated checkbox with an optional label and the control surface.

When to use

Use Checkbox when you need animated checkbox with an optional label and the control surface.

Import

TypeScript

import { Checkbox } from '@gzodo/ui'

Use Checkbox for a single boolean. The whole row is a label, so clicking the text toggles the box. The check is an SVG stroke animation. For a group of choices, render several checkboxes.

Examples

Accept terms

Basic

Controlled with checked and onChange. The event is the native input change.

RightLeft

Label position

labelPosition is right by default. left puts the text before the box.

GhostTransparent

Ghost and transparent

ghost removes the padding of the control surface. transpared (CRM spelling) drops the background and border.

LoadingDisabled

Loading and disabled

Loading replaces the box with a spinner. Disabled blocks the toggle and mutes the label.

SmallMediumLarge

Sizes

Size changes the label font and the control height. The check glyph stays 12px.

Checkbox

Property

Description

Type

Default

checked

Controlled checked state.

boolean

—

defaultChecked

Uncontrolled initial state.

boolean

—

onChange

Native change event. Read event.target.checked.

ChangeEventHandler

—

label

Text or node beside the box.

ReactNode

—

labelPosition

Which side the label sits on.

'left' | 'right'

'right'

size

Control height and label size.

'sm' | 'md' | 'lg' | 'xl'

'md'

variant

Surface. Defaults to default, or ghost when ghost is set.

ControlVariant

—

ghost

Zero padding. Also selects the ghost variant unless variant is set.

boolean

—

transpared

Transparent background and border. Spelling matches CRM.

boolean

—

isLoading

Replaces the box with a spinner.

boolean

—

disabled

Blocks toggling.

boolean

—

fullWidth

Stretch the row.

boolean

—

DatePicker

Radio