Checkbox Variants (cva config)

Purpose

checkboxVariants is the cva (class-variance-authority) configuration that powers every <Checkbox> render. It is split from checkbox.tsx into its own module so an ejected source copy under npx shadcn@latest add @suaveplan/checkbox keeps the cva configuration in a dedicated file. Theme overrides flow through useThemedVariants("Checkbox", checkboxVariants), so the runtime cva resolver can be replaced or extended by an active ThemePlugin without touching the component source.

The module exports a single checkboxVariants callable resolver tagged with the component name "Checkbox" via defineVariants.

Features

Three sizes (sm → h-3.5 w-3.5, default → h-4 w-4, lg → h-5 w-5) scaling the box.
border-primary border + shadow so the box reads against muted backgrounds.
data-[state=checked]:bg-primary + data-[state=indeterminate]:bg-primary flip the fill when checked or partial.
disabled:cursor-not-allowed disabled:opacity-50 for the native disabled state.
motion-reduce:transition-none for users with prefers-reduced-motion: reduce.
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 for keyboard-only focus styling.

Usage: Basic Example

import { checkboxVariants } from "@suaveplan/react-ui";

const className = checkboxVariants({ size: "default" });

Usage: Advanced Example

import { checkboxVariants, cn } from "@suaveplan/react-ui";

export function InlineCheckbox({ extra }: { extra?: string }) {
    return (
        <button
            type="button"
            role="checkbox"
            aria-checked="false"
            className={cn(checkboxVariants({ size: "sm" }), extra)}
        />
    );
}

API Reference

`checkboxVariants(props?: { size?: "sm" | "default" | "lg" }): string`

Returns the cva-merged class string for the supplied size. Omitted props fall back to the cva defaultVariants (size: "default").

Implementation Notes

The resolver is tagged with componentName: "Checkbox" (non-enumerable, non-writable) via defineVariants.
The cva config exposes only the size axis. Theme-specific variants (rounded vs square, filled vs outlined) are layered via variantOverrides.Checkbox rather than baked into the chassis.
Tokens reference theme-driven CSS custom properties (border-primary, bg-primary, text-primary-foreground) so the colour palette comes from the active ThemePlugin.cssVariables payload.

2.5 KiB Raw Blame History