Checkbox

Renders an animated checkbox with a checkmark and indeterminate state. Displays different animations based on its state. Use for forms requiring visual feedback on selection.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/checkbox

npx layro-cli add @educlopez/checkbox

npx layro-cli add @educlopez/checkbox

bunx layro-cli add @educlopez/checkbox

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useState } from "react";
import { SPRING_DEFAULT } from "@/components/smoothui/lib/animation";

export interface CheckboxProps {
  /** Accessible name, for checkboxes without a visible `<label>` */
  "aria-label"?: string;
  /** ID of the element labelling the checkbox */
  "aria-labelledby"?: string;
  /** Whether the checkbox is checked (controlled). Omit for uncontrolled use. */