Checkbox

Checkboxes allow users to toggle a single option or select multiple items from a list. Three variants are available: standalone checkbox, checkbox with label, and checkbox inside a container card.

Checkbox Container Playground

Preview

Code

Email notificationsReceive updates about your account

Controls

Size:

Small

Medium

Large

Style:

Square

Circle

Supporting:

Disabled:

Checkbox Label Playground

Preview

Code

Accept termsYou agree to our terms and conditions

Controls

Size:

Small

Medium

Large

Style:

Square

Circle

Supporting:

Disabled:

Checkbox Playground

Preview

Code

Controls

Size:

Small

Medium

Large

Style:

Square

Circle

Indeterminate:

Disabled:

Installation

You can add the checkbox component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/focus @react-aria/interactions @react-aria/utils

Copy and paste the following code into your project.

Checkbox.tsx

CheckboxContainer.tsx

CheckboxLabel.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

Standalone Checkbox

import { Checkbox } from '@versaui/ui/components/Checkbox';

<Checkbox onChange={(checked) => console.log(checked)} />

Checkbox with Label

import { CheckboxLabel } from '@versaui/ui/components/Checkbox';

<CheckboxLabel
  label="Accept terms"
  supportingText="Required for signup"
  onChange={(checked) => console.log(checked)}
/>

Checkbox Container

import { CheckboxContainer } from '@versaui/ui/components/Checkbox';

<CheckboxContainer
  title="Email notifications"
  supportingText="Receive updates about your account"
  onChange={(checked) => console.log(checked)}
/>

Checkbox Styles

Two shape styles are available — square (default) and circle:

// Square (default)
<Checkbox checkboxStyle="square" />

// Circle
<Checkbox checkboxStyle="circle" />

Size Variants

Three sizes are supported across all checkbox variants:

<Checkbox size="small" />
<Checkbox size="medium" />
<Checkbox size="large" />

Indeterminate State

The indeterminate state is used to indicate partial selection, commonly seen in parent checkboxes that control a group:

<Checkbox indeterminate onChange={(checked) => console.log(checked)} />

Controlled Usage

All checkbox variants support controlled state via checked and onChange:

const [isChecked, setIsChecked] = useState(false);

<Checkbox
  checked={isChecked}
  onChange={setIsChecked}
/>

<CheckboxLabel
  label="Remember me"
  checked={isChecked}
  onChange={setIsChecked}
/>

Accessibility

Uses native <input type="checkbox"> for full accessibility
Proper aria-checked and aria-disabled attributes
aria-checked="mixed" for indeterminate state
Label association via htmlFor for screen readers
Keyboard operable with Space to toggle

CheckboxContainer Props

Prop	Type	Default	Description
`title`	`string`	`—`	Required. Container title text.
`supportingText`	`string`	`—`	Description text below title.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Container and checkbox size.
`checkboxStyle`	`'square' \| 'circle'`	`'square'`	Checkbox shape variant.
`checked`	`boolean`	`—`	Controlled checked state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(checked: boolean) => void`	`—`	Called when checked state changes.
`className`	`string`	`''`	Additional CSS classes.

CheckboxLabel Props

Prop	Type	Default	Description
`label`	`string`	`—`	Required. Label text next to checkbox.
`supportingText`	`string`	`—`	Helper text below the label.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Label and checkbox size.
`checkboxStyle`	`'square' \| 'circle'`	`'square'`	Checkbox shape variant.
`checked`	`boolean`	`—`	Controlled checked state.
`indeterminate`	`boolean`	`false`	Indeterminate (partial) state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(checked: boolean) => void`	`—`	Called when checked state changes.
`className`	`string`	`''`	Additional CSS classes.

Checkbox Props

Prop	Type	Default	Description
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Checkbox size.
`checkboxStyle`	`'square' \| 'circle'`	`'square'`	Checkbox shape variant.
`checked`	`boolean`	`—`	Controlled checked state.
`indeterminate`	`boolean`	`false`	Indeterminate (partial) state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(checked: boolean) => void`	`—`	Called when checked state changes.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page