iconiq.

Checkbox group

Multi-select rows with a bordered empty box when off and a lone animated tick when on. Built with Framer Motion and your theme tokens.

Live preview

Win the midfield · Break the last line · Subs wait for the call

Install

v0

Ship the registry bundle to v0 and iterate on motion or layout with prompts.

Usage

Minimal example — see tile 05 for options, value, and packages.

tsx
import { CheckboxGroup } from "@/components/ui/checkbox-group";
import { useState } from "react";

const options = [
  {
    label: "High press",
    value: "press",
    description: "Optional line under the title",
  },
  { label: "Hold the half-spaces", value: "halfspaces" },
];

export function MatchdayToggles() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <CheckboxGroup onChange={setValue} options={options} value={value} />
  );
}

Dependencies

Registry peers and API — export CheckboxGroup and CheckboxGroupOption.

options (required)

Array of CheckboxGroupOption: label (visible title), value (stable id used in the controlled array), optional description (muted subline), optional disabled (skips toggle, dims row).

value (optional)

Controlled selected values as string[]. Defaults to []. Each entry should match an option value.

onChange (optional)

Called with the next string[] when a row is toggled. Use with value for controlled usage; omit both for static display only.

className (optional)

Forwarded to the root flex column wrapper for spacing or max-width in your form layout.

framer-motion

motion.button rows with hover background; AnimatePresence for check/uncheck crossfade; checked state shows only a primary-colored tick (no filled box).

lucide-react

Lucide Check when selected (no inner fill on the row box). Swap for another icon if you want a different mark.

Accessibility

Each row is a native button type="button". For full checkbox semantics in production, consider wrapping with a fieldset/legend or pairing with hidden inputs.

shadcn registry

Install adds checkbox-group.tsx as components/ui/checkbox-group; peers are framer-motion and lucide-react.

npx shadcn@latest add https://iconiqui.com/r/checkbox-group.json