Checkbox
A control that allows the user to toggle between checked and not checked.
Made by imskyleenPowered by
Loading component...
Installation
Usage
The Checkbox component provides a visually appealing checkbox with smooth animations and comprehensive accessibility support.
import { Checkbox } from "@/components/redpanda-ui/checkbox"
// Basic checkbox
<Checkbox id="terms" />
// Controlled checkbox
const [checked, setChecked] = useState(false)
<Checkbox
id="newsletter"
checked={checked}
onCheckedChange={setChecked}
/>
// With label
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label htmlFor="terms" className="text-sm font-medium">
Accept terms and conditions
</label>
</div>
// Disabled checkbox
<Checkbox id="disabled" disabled />
// With indeterminate state
<Checkbox id="indeterminate" checked="indeterminate" />When to use
Use this decision tree to determine when to use the Checkbox component:
Use Checkbox when:
- Users need to select multiple options from a list
- Confirming agreement (terms, privacy policy)
- Enabling/disabling individual features or settings
- Creating multi-select forms
- Building data tables with row selection
- Collecting binary preferences (yes/no, on/off)
Don't use Checkbox for:
- Single choice from multiple options (use Radio Group)
- Immediate toggle actions (use Switch)
- Navigation or triggering actions (use Button)
- Complex multi-step selections (use Multi-Select)
Anatomy
The Checkbox component combines Radix UI primitives with Motion animations:
Checkbox Component Structure:
┌─────────────────────────────────────────────────────┐
│ <CheckboxPrimitive.Root> (Radix primitive) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <motion.button> (Interactive element) │ │
│ │ │ │
│ │ Styles Applied: │ │
│ │ • Size (20x20px) │ │
│ │ • Border (2px, changes on state) │ │
│ │ • Background (transparent → filled) │ │
│ │ • Focus ring (for accessibility) │ │
│ │ • Motion effects (scale on hover/tap) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ <CheckboxPrimitive.Indicator> │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ <motion.svg> (Checkmark icon) │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │
│ │ │ │ │ <motion.path> (Animated path) │ │ │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ │ │ Animation States: │ │ │ │ │
│ │ │ │ │ • unchecked: pathLength=0, opacity=0│ │ │ │ │
│ │ │ │ │ • checked: pathLength=1, opacity=1 │ │ │ │ │
│ │ │ │ │ • Duration: 0.2s with 0.2s delay │ │ │ │ │
│ │ │ │ └─────────────────────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
State Management:
• Controlled: Uses checked prop with onCheckedChange
• Uncontrolled: Uses defaultChecked prop
• Internal state: Tracks check state for animations
• Supports indeterminate state for partial selections
Accessibility Features:
• Keyboard navigation (Space to toggle)
• Focus management with visible focus ring
• Screen reader support via Radix primitives
• ARIA attributes automatically applied
• Label association through id/htmlFor
Animation System:
• Motion library integration for smooth interactions
• Scale animations on hover (1.05x) and tap (0.95x)
• Checkmark draws in with pathLength animation
• 500ms color transition for state changes
• Staggered timing: background first, then checkmark
Motion Props Support:
• All HTMLMotionProps<'button'> supported
• Custom animation overrides via motionProps
• Gesture recognition for enhanced interactionsProps
Animate UI Props
Checkbox
Prop
Type
Examples
Default
Loading component...
Days of the week (Maintenance window)
Loading component...
Form
Loading component...
Credits
- We use Radix UI for the checkbox component.
- We take our inspiration from Shadcn UI for the checkbox style.
- We use Animate UI from imskyleen for all the animations.
Built by malinskibeniamin. The source code is available on GitHub.