Checkbox
A control for toggling a boolean choice.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
import { Checkbox } from "@moe-ui/registry/components/ui/checkbox";
import { Label } from "@moe-ui/registry/components/ui/label";
import { View } from "react-native";
export default function CheckboxPreview() {
return (
<View className="flex-row items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</View>
);
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add checkboxUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Checkbox } from "@/components/ui/checkbox";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Associate the control with a visible label. Keyboard focus, disabled state, and validation semantics are covered by the web test matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports1 exports
Checkbox"use client";
import { Icon } from "./icon";
import { cn } from "../../lib/utils";
import * as CheckboxPrimitive from "@rn-primitives/checkbox";
import { Check } from "lucide-react-native";
import * as React from "react";
import { Platform } from "react-native";
const DEFAULT_HIT_SLOP = 24;
function Checkbox({
className,
checkedClassName,
indicatorClassName,
iconClassName,
checked: checkedProp,
defaultChecked = false,
onCheckedChange,
...props
}: Omit<CheckboxPrimitive.RootProps, "checked" | "onCheckedChange"> &
React.RefAttributes<CheckboxPrimitive.RootRef> & {
checked?: boolean;
defaultChecked?: boolean;
onCheckedChange?: (checked: boolean) => void;
checkedClassName?: string;
indicatorClassName?: string;
iconClassName?: string;
}) {
const [uncontrolledChecked, setUncontrolledChecked] =
React.useState(defaultChecked);
const checked = checkedProp ?? uncontrolledChecked;
return (
<CheckboxPrimitive.Root
className={cn(
"border-input dark:bg-input/30 size-4 shrink-0 rounded-[4px] border shadow-sm shadow-black/5",
Platform.select({
web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer cursor-default outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed",
native: "overflow-hidden",
}),
checked && cn("border-primary", checkedClassName),
props.disabled && "opacity-50",
className,
)}
hitSlop={DEFAULT_HIT_SLOP}
checked={checked}
onCheckedChange={(nextChecked) => {
if (checkedProp === undefined) setUncontrolledChecked(nextChecked);
onCheckedChange?.(nextChecked);
}}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn(
"bg-primary h-full w-full items-center justify-center",
indicatorClassName,
)}
>
<Icon
as={Check}
size={12}
strokeWidth={Platform.OS === "web" ? 2.5 : 3.5}
className={cn("text-primary-foreground", iconClassName)}
/>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);
}
export { Checkbox };