Checkbox

Last updated: September 20, 2026

Animated checkbox with spring checkmark animation, indeterminate state support, and full accessibility.

Installation

npx smoothui-cli add checkbox

Features

Animated checkmark with spring path drawing, indeterminate support, and Radix-backed form integration. Scroll the sections below — the panel shows one state at a time.

States

Checked

The default toggle: click the box or its label to check and uncheck. The checkmark draws in with a spring path animation.

Indeterminate

Use indeterminate for partial selection — a parent “select all” row when some but not all children are checked. Renders aria-checked="mixed" with an animated dash icon.

Disabled

A non-interactive checkbox with reduced opacity. Pair with a label that uses matching opacity so the whole row reads as unavailable.

Accessibility

Keyboard Interactions

Key	Description
`Space`	Toggles the checkbox checked state
`Tab`	Moves focus to/from the checkbox

ARIA Attributes

Attribute	Element	Purpose
`aria-checked`	Root	`true`, `false`, or `"mixed"` for indeterminate
`role="checkbox"`	Root	Identifies the element as a checkbox (provided by Radix)
`disabled`	Root	Disables interaction and applies visual styling

This component respects prefers-reduced-motion via useReducedMotion from Motion. When reduced motion is preferred, the checkmark and indeterminate icon appear instantly without spring path animation.

Props

Created by

Eduardo Calvo

Improved by

motion.dev

radix-ui

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.