Are the ai2 List checkboxes free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

List checkboxes

Five checkboxes built for list and group layouts: a full-width row, a divided row, a grouped bordered row, an inline filter chip and a dense row. The box stays constant and only the row shell changes, so a whole list reads as one system. Each is self-contained, sized, token-driven, keeps the small-control touch target, and works controlled or uncontrolled.

CheckboxList

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/checkbox-list

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/checkbox-list.tsx

"use client"

import * as React from "react"
import { Check } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* List checkbox family: 5 list/group layouts. The box stays the same in every
   variant; what changes is the shell of the row (a full-width row, a row with a
   divider, a boxed group, an inline chip, a dense row). The whole row is the
   clickable target, but because the box is under 24px it keeps the invisible
   touch-area extension (after:-inset-1.5). The label is visible and bound with
   aria-labelledby; the ids are produced by React.useId(). Color comes ONLY from
   tokens, via alpha color-mix. framer-motion switches instantly under
   reduced-motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const boxSize: Record<StyledSize, string> = {
  sm: "size-4",
  md: "size-5",
  lg: "size-6",
  xl: "size-7",
}

const iconSize: Record<StyledSize, string> = {
  sm: "size-3",
  md: "size-3.5",
  lg: "size-4",
  xl: "size-5",
}

const textSize: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm",
  xl: "text-base",
}

const rowPad: Record<StyledSize, string> = {
  sm: "gap-2 px-2 py-1.5",
  md: "gap-2.5 px-3 py-2",
  lg: "gap-3 px-3 py-2.5",
  xl: "gap-3 px-4 py-3",
}

const densePad: Record<StyledSize, string> = {
  sm: "gap-2 px-1.5 py-0.5",
  md: "gap-2 px-2 py-1",
  lg: "gap-2.5 px-2 py-1",
  xl: "gap-2.5 px-2.5 py-1.5",
}

/* Satir kabugu: genis hedef, focus halkasi, gecerlilik gorunumu. */
const rowBase =
  "relative flex w-full max-w-xs cursor-pointer select-none items-center text-left outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 [&_svg]:shrink-0 [&_i]:leading-none"

/* Kutu: kucuk gosterge, dokunma alani uzantisi korunur. */
const boxBase =
  "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors after:absolute after:-inset-1.5"

/* Transition type: instant under reduced-motion, spring otherwise. */
type SpringLike = { duration: number } | { type: "spring"; stiffness: number; damping: number }

type CheckboxProps = Omit<React.ComponentProps<"button">, "onChange"> & {
  size?: StyledSize
  label?: string
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}

function useCheckbox(props: {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}) {
  const { checked, defaultChecked, onCheckedChange } = props
  const reduce = useReducedMotion()
  const [internal, setInternal] = React.useState(defaultChecked ?? false)
  const on = checked ?? internal
  const toggle = () => {
    if (checked === undefined) setInternal((v) => !v)
    onCheckedChange?.(!on)
  }
  const spring: SpringLike = reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 500, damping: 30 }
  return { on, toggle, spring }
}

/* Ortak kutu gostergesi. */
function Box({ on, size, spring }: { on: boolean; size: StyledSize; spring: SpringLike }) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        boxBase,
        boxSize[size],
        on ? "border-primary bg-primary text-primary-foreground" : "border-field-border text-transparent"
      )}
    >
      <motion.span
        initial={false}
        animate={{ scale: on ? 1 : 0, opacity: on ? 1 : 0 }}
        transition={spring}
        className="flex items-center justify-center"
      >
        <Check className={cn(iconSize[size], "stroke-[3]")} />
      </motion.span>
    </span>
  )
}

/* Row: a full-width list row that takes a background on hover. */
export function RowCheckbox({
  className,
  size = "md",
  label = "Marketing emails",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        rowBase,
        rowPad[size],
        "rounded-md hover:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]",
        className
      )}
      {...props}
    >
      <Box on={on} size={size} spring={spring} />
      <span id={labelId} className={cn(textSize[size], "text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* Divided: a row carrying a thin separator underneath; they stack. */
export function DividedCheckbox({
  className,
  size = "md",
  label = "Product updates",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        rowBase,
        rowPad[size],
        "border-b border-border px-0 hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)]",
        className
      )}
      {...props}
    >
      <Box on={on} size={size} spring={spring} />
      <span id={labelId} className={cn(textSize[size], "text-foreground")}>
        {label}
      </span>
      <span
        aria-hidden="true"
        className={cn(textSize[size], "ml-auto text-muted-foreground")}
      >
        {on ? "On" : "Off"}
      </span>
    </button>
  )
}

/* Grouped: a row sitting in its own bordered box, for grouped lists. */
export function GroupedCheckbox({
  className,
  size = "md",
  label = "Two factor auth",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        rowBase,
        rowPad[size],
        "rounded-lg border border-border bg-card first:rounded-b-none last:rounded-t-none [&:not(:first-child)]:-mt-px hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)]",
        className
      )}
      {...props}
    >
      <Box on={on} size={size} spring={spring} />
      <span id={labelId} className={cn(textSize[size], "font-medium text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* Inline: an inline chip; for filter groups that flow side by side. */
export function InlineCheckbox({
  className,
  size = "md",
  label = "In stock",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        rowBase,
        rowPad[size],
        "inline-flex w-auto max-w-none rounded-full border",
        on
          ? "border-primary bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)]"
          : "border-border bg-transparent hover:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]",
        className
      )}
      {...props}
    >
      <Box on={on} size={size} spring={spring} />
      <span id={labelId} className={cn(textSize[size], "whitespace-nowrap text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* Dense: a tightened row for dense tables and long lists. */
export function DenseCheckbox({
  className,
  size = "md",
  label = "Show archived",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        rowBase,
        densePad[size],
        "rounded hover:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]",
        className
      )}
      {...props}
    >
      <Box on={on} size={size} spring={spring} />
      <span id={labelId} className={cn(textSize[size], "leading-tight text-muted-foreground")}>
        {label}
      </span>
    </button>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Row

A full-width list row that shades on hover.

Divided

A row with a hairline divider and a trailing state word.

Grouped

A bordered row that stacks into a single grouped card.

Inline

A rounded chip that flows inline in a filter bar.

Dense

A tightened row for long lists and dense tables.

ai2 List checkboxes: 5 styled variations on the token system

The ai2 List checkboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around checkbox rows for list and group layouts. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion scales the checkmark in with a spring. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the checkmark appears instantly with no animation.

What is in the ai2 List checkboxes?

5 exports in one file: Row, Divided, Grouped, Inline and Dense. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion scales the checkmark in with a spring.
Reduced-motion aware: Under prefers-reduced-motion, the checkmark appears instantly with no animation.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The List checkboxes sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.