Inputs/Animated Checkbox

Animated Checkbox

A Lottie-animated checkbox with smooth check/uncheck transitions.

Themed

When to Use

Use Animated Checkbox when you need to:

  • Provide a delightful micro-interaction for check/uncheck actions
  • Draw attention to important opt-in choices like terms and conditions
  • Add personality to forms where smooth animations enhance the experience
  • Create visually rich onboarding flows or configuration screens
  • Replace a standard checkbox with a branded, animated alternative

When Not to Use

  • Large checkbox groups where animation may feel excessive - use Checkbox
  • Instant on/off settings - use Switch for immediate effect
  • Binary toggle in toolbars - use Toggle
  • Mutually exclusive options - use Radio Group

Default

The default animated checkbox with Lottie-powered check/uncheck transitions.

Basic Usage

Unchecked

With Label

Disabled

Disabled
Disabled (checked)

With Label

Pair the animated checkbox with a label using id and htmlFor for full accessibility.

Disabled

Disabled state prevents interaction and applies reduced opacity. Works for both checked and unchecked states.

Disabled
Disabled (checked)

Checkbox Group

Multiple animated checkboxes grouped together for selecting several options from a list.

Select your interests

Selected: development

Form Integration

Use the name prop to enable form submission. A hidden input is rendered for native form compatibility.

You agree to our Terms of Service and Privacy Policy.

Uncontrolled

Use defaultChecked for uncontrolled mode where the checkbox manages its own internal state.

UX & Design Guidelines

Visual Hierarchy

The Lottie animation draws the eye, so use animated checkboxes sparingly for high-impact moments. Reserve them for key opt-in actions like terms acceptance, feature toggles, or onboarding steps. For bulk selections or data tables, prefer the standard Checkbox component.

Spacing & Layout

The animated checkbox renders at size-6 (24x24px) which is slightly larger than the standard checkbox. Use gap-3 between checkbox and label for comfortable spacing. For groups, use space-y-2 between items.

Responsive Behavior

The 24x24px animation container provides an adequate touch target on mobile devices. Ensure the clickable area includes both the checkbox and label for easier touch interaction. Consider reducing animation usage on mobile to conserve battery life and respect prefers-reduced-motion.

Color & Contrast

The Lottie animation uses the design system primary color for the checkmark stroke. Disabled states reduce opacity to 50% while maintaining the animation artwork visibility. Focus states use ring-ring with a 2px offset for clear keyboard navigation indicators.

Accessibility

Keyboard Navigation

  • Tab — Move focus to/from the checkbox
  • Space — Toggle the checkbox state
  • Enter — Toggle the checkbox state (non-standard but supported)
  • Disabled checkboxes are removed from the tab order via tabIndex={-1}

Screen Reader Support

  • Uses role="checkbox" for proper ARIA semantics
  • State announced via aria-checked (true/false)
  • Standalone checkboxes require aria-label or aria-labelledby
  • Disabled state is conveyed via aria-disabled
  • The Lottie animation container is marked aria-hidden="true" to prevent SVG noise

Focus Management

Visible focus ring with 2px width using focus-visible:ring-2 and a 2px offset via ring-offset-2. The ring color uses ring-ring and adapts to the current theme for both light and dark modes.

Form Submission

When the name prop is provided, a hidden <input type="checkbox"> is rendered for native form submission compatibility. The hidden input is removed from the tab order and syncs with the visual state.

ARIA Attributes

{/* Basic accessible checkbox with aria-label */}
<AnimatedCheckbox
  checked={checked}
  onCheckedChange={setChecked}
  aria-label="Subscribe to newsletter"
/>

{/* With visible label using htmlFor/id */}
<AnimatedCheckbox id="terms" />
<label htmlFor="terms">Accept terms</label>

{/* With aria-labelledby for complex labels */}
<AnimatedCheckbox aria-labelledby="complex-label" />
<span id="complex-label">
  I agree to the <a href="/terms">Terms</a> and <a href="/privacy">Privacy Policy</a>
</span>

{/* Disabled state is conveyed via aria-disabled */}
<AnimatedCheckbox disabled aria-label="Feature unavailable" />

Related Components

Checkbox

Standard checkbox built on Radix UI primitives for forms and lists.

Switch

Use for settings that take effect immediately on toggle.

Toggle

Two-state button for on/off or selected/unselected states.

Radio Group

Use when only one option can be selected from a set.

API Reference

The AnimatedCheckbox component accepts the following props in addition to standard div attributes.

PropTypeDefaultDescription
checkedboolean—The controlled checked state of the checkbox.
defaultCheckedbooleanfalseThe default checked state when initially rendered (uncontrolled mode).
onCheckedChange(checked: boolean) => void—Event handler called when the checked state changes.
disabledbooleanfalseWhen true, prevents user interaction and applies disabled styles.
idstring—The unique identifier, used to associate with a label via htmlFor.
namestring—The name of the checkbox for form submission. Renders a hidden input.
aria-labelstring—Accessible label for screen readers when no visible label is present.
aria-labelledbystring—ID of the element that labels this checkbox.
classNamestring—Additional CSS classes to apply to the checkbox container.