Pittaya UI
Pittaya UI
Links

Search Components

Search for components by name, description, category or tags

Formsstable

Checkbox

An accessible checkbox component with optional animation variant for enhanced visual feedback.

Installation

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add checkbox

When to use

Use the Checkbox component when you need to allow users to select one or multiple options from a list, toggle settings, or accept terms and conditions.

Checkboxes are ideal for forms where users can make independent selections that don't affect other options.

Best practices

  • Always provide a clear label that describes what the checkbox controls.
  • Use the animated variant to provide visual feedback when users interact with the checkbox.
  • Group related checkboxes together with a fieldset and legend for better accessibility.
  • Ensure the checkbox is large enough to be easily clickable (at least 44x44 pixels including the label).
  • Use aria-invalid to indicate validation errors.

Accessibility

The Checkbox component is built on top of Radix UI's checkbox primitive, which provides full keyboard navigation and screen reader support out of the box.

  • Keyboard support: Use Space to toggle the checkbox state.
  • Focus is clearly indicated with a ring outline for better visibility.
  • The component properly communicates its state (checked/unchecked) to assistive technologies.
  • Always associate checkboxes with labels using the id and htmlFor attributes.

Variants

The Checkbox component supports two variants:

  • default: Standard checkbox without animations. Provides instant visual feedback with no transition effects.
  • animated: Adds a smooth zoom-in animation when the check mark appears, enhancing the user experience with subtle motion feedback.

Examples

Combine variants and sizes to meet your needs.

Basic usage

A simple checkbox with a label.

Animated

Checkbox with a smooth zoom-in animation when checked.

Disabled state

Checkbox in disabled state, both checked and unchecked.

With description

Checkbox with a label and additional descriptive text.

You agree to our Terms of Service and Privacy Policy.

Controlled checkbox

A checkbox with controlled state using React state.

Status: Not subscribed

Multiple checkboxes

A group of related checkboxes for multiple selections.

Select your interests

Properties

TSX interface that combines variants and default attributes.

PropTypeDefaultDescription
variant
'default' | 'animated''default'Controls the animation behavior. Use 'animated' for a zoom-in effect when checking the box.
checked
boolean | 'indeterminate'—The controlled checked state of the checkbox. Can be true, false, or 'indeterminate'.
defaultChecked
boolean—The default checked state when the component is initially rendered. Use when you don't need to control the state.
onCheckedChange
(checked: boolean | 'indeterminate') => void—Event handler called when the checked state of the checkbox changes.
disabled
booleanfalseWhen true, prevents the user from interacting with the checkbox.
required
booleanfalseWhen true, indicates that the user must check the checkbox before submitting a form.
name
string—The name of the checkbox. Submitted with its owning form as part of a name/value pair.
value
string'on'The value given as data when submitted with a name.