Checkbox
Checkbox with thoughtful defaults, semantic styling, and editable source.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/checkbox.jsonUse it
Scroll horizontally for long lines
"use client";
import {Checkbox} from '@/components/jez-ui/ui/checkbox';
export default function Example(){
return <><div className="grid w-full max-w-sm gap-5"><h3 className="text-2xl">Before we go live.</h3>{['Add the finishing touches','Check the small screen','Share it with the team'].map((text,i)=><label key={text} className="flex items-center gap-3 border-b border-border pb-4 text-sm"><Checkbox defaultChecked={i===0}/>{text}</label>)}</div></>;
}Props & types
Scroll horizontally for long lines
React.ComponentProps<typeof Primitive.Root>Source
View 2 source files
registry/ui/checkbox.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
import { Checkbox as Primitive } from "radix-ui";
export function Checkbox({
className,
...props
}: React.ComponentProps<typeof Primitive.Root>) {
return (
<Primitive.Root
className={cn(
"size-5 rounded border border-border data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className,
)}
{...props}
>
<Primitive.Indicator className="flex items-center justify-center">
<svg viewBox="0 0 16 16" className="size-4" aria-hidden="true">
<path
d="m3 8 3 3 7-7"
fill="none"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</Primitive.Indicator>
</Primitive.Root>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
Dependencies
radix-ui@1.6.7 · clsx@2.1.1 · tailwind-merge@3.5.0
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →