Indeterminate checkboxes
Five parent and child groups with real indeterminate logic: the parent derives from its children, clicking the parent checks or clears all of them, and a mixed parent announces aria-checked mixed with a dash. Ships as a mixed group, a parent header, a tree, a partial progress group and a select-all list. Self-contained, sized, token-driven, and controlled or uncontrolled.
CheckboxIndeterminate
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/checkbox-indeterminateDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motion lucide-reactCopy the source
components/ui/checkbox-indeterminate.tsxTS
"use client"
import * as React from "react"
import { Check, Minus } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Indeterminate checkbox family: 5 parent/child selection groups. The logic is
real: the parent derives from the children (all on -> true, none -> false,
mixed -> "mixed") and pressing the parent turns every child on or off. A parent
in the mixed state carries aria-checked="mixed" and shows a dash. Because the
boxes are under 24px the invisible touch-area extension (after:-inset-1.5) is
mandatory in every variant. The labels are visible and bound with
aria-labelledby; the ids are produced by React.useId(). All useState lives in
the root component, never inside a subtree that opens and closes. 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 boxBase =
"relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border outline-none transition-colors after:absolute after:-inset-1.5 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"
const rowBase = "inline-flex items-center gap-2.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
}
const CHILD_LABELS = ["Comments", "Mentions", "Replies"] as const
type BoxState = boolean | "mixed"
/* Real parent/child state. Without props it starts in the mixed state so the "mixed" appearance is readable on the first frame (deterministic, not random). */
function useGroup(props: {
checked?: boolean
defaultChecked?: boolean
onCheckedChange?: (checked: boolean) => void
}) {
const { checked, defaultChecked, onCheckedChange } = props
const reduce = useReducedMotion()
const [kids, setKids] = React.useState<boolean[]>(() =>
defaultChecked === undefined
? [true, false, false]
: [defaultChecked, defaultChecked, defaultChecked]
)
const effective = checked === undefined ? kids : kids.map(() => checked)
const all = effective.every(Boolean)
const none = effective.every((v) => !v)
const parent: BoxState = all ? true : none ? false : "mixed"
const toggleParent = () => {
const next = !all
if (checked === undefined) setKids((list) => list.map(() => next))
onCheckedChange?.(next)
}
const toggleChild = (index: number) => {
const next = effective.map((v, i) => (i === index ? !v : v))
setKids(next)
onCheckedChange?.(next.every(Boolean))
}
const spring: SpringLike = reduce
? { duration: 0 }
: { type: "spring" as const, stiffness: 500, damping: 30 }
return { kids: effective, parent, all, toggleParent, toggleChild, spring }
}
/* Durum kutusu: mixed -> tire, true -> onay, false -> bos. */
function StateBox({
state,
size,
spring,
labelId,
onPress,
className,
...props
}: {
state: BoxState
size: StyledSize
spring: SpringLike
labelId: string
onPress: () => void
className?: string
} & Omit<React.ComponentProps<"button">, "onChange">) {
const filled = state !== false
return (
<button
type="button"
role="checkbox"
aria-checked={state === "mixed" ? "mixed" : state}
aria-labelledby={labelId}
data-slot="styled-checkbox"
onClick={onPress}
className={cn(
boxBase,
boxSize[size],
filled
? "border-primary bg-primary text-primary-foreground"
: "border-field-border text-transparent",
className
)}
{...props}
>
<motion.span
initial={false}
animate={{ scale: filled ? 1 : 0, opacity: filled ? 1 : 0 }}
transition={spring}
className="flex items-center justify-center"
>
{state === "mixed" ? (
<Minus className={cn(iconSize[size], "stroke-[3]")} />
) : (
<Check className={cn(iconSize[size], "stroke-[3]")} />
)}
</motion.span>
</button>
)
}
/* A child row: its own box + a visible label. */
function ChildRow({
label,
state,
size,
spring,
onPress,
}: {
label: string
state: boolean
size: StyledSize
spring: SpringLike
onPress: () => void
}) {
const labelId = React.useId()
return (
<span className={rowBase}>
<StateBox state={state} size={size} spring={spring} labelId={labelId} onPress={onPress} />
<span
id={labelId}
onClick={onPress}
className={cn(textSize[size], "cursor-pointer select-none text-muted-foreground")}
>
{label}
</span>
</span>
)
}
/* Mixed: the parent shows the mixed state with a dash, and the children are listed
beneath it. */
export function MixedCheckbox({
className,
size = "md",
label = "Notifications",
checked,
defaultChecked,
onCheckedChange,
...props
}: CheckboxProps) {
const { kids, parent, spring, toggleParent, toggleChild } = useGroup({
checked,
defaultChecked,
onCheckedChange,
})
const labelId = React.useId()
return (
<div className={cn("flex flex-col gap-2", className)}>
<span className={rowBase}>
<StateBox
state={parent}
size={size}
spring={spring}
labelId={labelId}
onPress={toggleParent}
{...props}
/>
<span
id={labelId}
onClick={toggleParent}
className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
>
{label}
</span>
</span>
<div className="flex flex-col gap-2 pl-6">
{CHILD_LABELS.map((child, i) => (
<ChildRow
key={child}
label={child}
state={kids[i]}
size={size}
spring={spring}
onPress={() => toggleChild(i)}
/>
))}
</div>
</div>
)
}
/* Parent: the parent sits on a card and the children are gathered in an indented
block. */
export function ParentCheckbox({
className,
size = "md",
label = "All permissions",
checked,
defaultChecked,
onCheckedChange,
...props
}: CheckboxProps) {
const { kids, parent, spring, toggleParent, toggleChild } = useGroup({
checked,
defaultChecked,
onCheckedChange,
})
const labelId = React.useId()
return (
<div className={cn("flex w-full max-w-xs flex-col rounded-lg border border-border", className)}>
<span
className={cn(
rowBase,
"border-b border-border bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)] px-3 py-2.5"
)}
>
<StateBox
state={parent}
size={size}
spring={spring}
labelId={labelId}
onPress={toggleParent}
{...props}
/>
<span
id={labelId}
onClick={toggleParent}
className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
>
{label}
</span>
</span>
<div className="flex flex-col gap-2 px-3 py-2.5">
{CHILD_LABELS.map((child, i) => (
<ChildRow
key={child}
label={child}
state={kids[i]}
size={size}
spring={spring}
onPress={() => toggleChild(i)}
/>
))}
</div>
</div>
)
}
/* Tree: the children are connected like a tree with vertical and horizontal
connector lines. */
export function TreeCheckbox({
className,
size = "md",
label = "src",
checked,
defaultChecked,
onCheckedChange,
...props
}: CheckboxProps) {
const { kids, parent, spring, toggleParent, toggleChild } = useGroup({
checked,
defaultChecked,
onCheckedChange,
})
const labelId = React.useId()
return (
<div className={cn("flex flex-col gap-2", className)}>
<span className={rowBase}>
<StateBox
state={parent}
size={size}
spring={spring}
labelId={labelId}
onPress={toggleParent}
{...props}
/>
<span
id={labelId}
onClick={toggleParent}
className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
>
{label}
</span>
</span>
<div className="relative flex flex-col gap-2 pl-6">
<span
aria-hidden="true"
className="absolute bottom-3 left-2 top-0 w-px bg-border"
/>
{CHILD_LABELS.map((child, i) => (
<span key={child} className="relative">
<span aria-hidden="true" className="absolute left-[-1rem] top-1/2 h-px w-3 bg-border" />
<ChildRow
label={child}
state={kids[i]}
size={size}
spring={spring}
onPress={() => toggleChild(i)}
/>
</span>
))}
</div>
</div>
)
}
/* Partial: ebeveynin yaninda kac cocugun secili oldugunu gosteren token cubuk. */
export function PartialCheckbox({
className,
size = "md",
label = "Selected filters",
checked,
defaultChecked,
onCheckedChange,
...props
}: CheckboxProps) {
const { kids, parent, spring, toggleParent, toggleChild } = useGroup({
checked,
defaultChecked,
onCheckedChange,
})
const labelId = React.useId()
const done = kids.filter(Boolean).length
return (
<div className={cn("flex w-full max-w-xs flex-col gap-2", className)}>
<span className={cn(rowBase, "w-full")}>
<StateBox
state={parent}
size={size}
spring={spring}
labelId={labelId}
onPress={toggleParent}
{...props}
/>
<span
id={labelId}
onClick={toggleParent}
className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
>
{label}
</span>
<span className={cn(textSize[size], "ml-auto tabular-nums text-muted-foreground")}>
{done}/{kids.length}
</span>
</span>
<span aria-hidden="true" className="h-1 w-full overflow-hidden rounded-full bg-muted">
<motion.span
initial={false}
animate={{ scaleX: done / kids.length }}
transition={spring}
className="block h-full w-full origin-left rounded-full bg-primary"
/>
</span>
<div className="flex flex-col gap-2 pl-6">
{CHILD_LABELS.map((child, i) => (
<ChildRow
key={child}
label={child}
state={kids[i]}
size={size}
spring={spring}
onPress={() => toggleChild(i)}
/>
))}
</div>
</div>
)
}
/* All: a "select all" header, with the children in a separated list. */
export function AllCheckbox({
className,
size = "md",
label = "Select all",
checked,
defaultChecked,
onCheckedChange,
...props
}: CheckboxProps) {
const { kids, parent, spring, toggleParent, toggleChild } = useGroup({
checked,
defaultChecked,
onCheckedChange,
})
const labelId = React.useId()
const done = kids.filter(Boolean).length
return (
<div className={cn("flex w-full max-w-xs flex-col gap-2", className)}>
<span className={cn(rowBase, "w-full")}>
<StateBox
state={parent}
size={size}
spring={spring}
labelId={labelId}
onPress={toggleParent}
{...props}
/>
<span
id={labelId}
onClick={toggleParent}
className={cn(
textSize[size],
"cursor-pointer select-none font-semibold uppercase tracking-wide text-foreground"
)}
>
{label}
</span>
<span className={cn(textSize[size], "ml-auto text-muted-foreground")}>
{done} selected
</span>
</span>
<span aria-hidden="true" className="h-px w-full bg-border" />
<div className="flex flex-col gap-2">
{CHILD_LABELS.map((child, i) => (
<ChildRow
key={child}
label={child}
state={kids[i]}
size={size}
spring={spring}
onPress={() => toggleChild(i)}
/>
))}
</div>
</div>
)
}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.
Mixed
The parent shows a dash while only some children are checked.
Notifications
CommentsMentionsReplies
TS
import { MixedCheckbox } from "@/components/ui/checkbox-indeterminate"
<MixedCheckbox />Notifications
smCommentsMentionsReplies
Notifications
mdCommentsMentionsReplies
Notifications
lgCommentsMentionsReplies
Notifications
xlCommentsMentionsReplies
Parent
The parent sits in a header row above an indented child block.
All permissions
CommentsMentionsReplies
TS
import { ParentCheckbox } from "@/components/ui/checkbox-indeterminate"
<ParentCheckbox />All permissions
smCommentsMentionsReplies
All permissions
mdCommentsMentionsReplies
All permissions
lgCommentsMentionsReplies
All permissions
xlCommentsMentionsReplies
Tree
The children hang off the parent with tree connector lines.
src
CommentsMentionsReplies
TS
import { TreeCheckbox } from "@/components/ui/checkbox-indeterminate"
<TreeCheckbox />src
smCommentsMentionsReplies
src
mdCommentsMentionsReplies
src
lgCommentsMentionsReplies
src
xlCommentsMentionsReplies
Partial
A token bar and a count show how much of the group is selected.
Selected filters1/3
CommentsMentionsReplies
TS
import { PartialCheckbox } from "@/components/ui/checkbox-indeterminate"
<PartialCheckbox />Selected filters1/3
smCommentsMentionsReplies
Selected filters1/3
mdCommentsMentionsReplies
Selected filters1/3
lgCommentsMentionsReplies
Selected filters1/3
xlCommentsMentionsReplies
All
A select-all header with a live count above a divided list.
Select all1 selected
CommentsMentionsReplies
TS
import { AllCheckbox } from "@/components/ui/checkbox-indeterminate"
<AllCheckbox />Select all1 selected
smCommentsMentionsReplies
Select all1 selected
mdCommentsMentionsReplies
Select all1 selected
lgCommentsMentionsReplies
Select all1 selected
xlCommentsMentionsReplies
ai2 Indeterminate checkboxes: 5 styled variations on the token system
The ai2 Indeterminate checkboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around parent and child checkbox groups with a mixed state. 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 check or dash in and animates the progress bar. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the check, the dash and the bar update instantly with no animation.
What is in the ai2 Indeterminate checkboxes?
5 exports in one file: Mixed, Parent, Tree, Partial and All. 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 check or dash in and animates the progress bar.
- Reduced-motion aware: Under prefers-reduced-motion, the check, the dash and the bar update 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 Indeterminate 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.