Inputs
Checkbox
Well, a checkbox. Switch between a checked, unchecked and indeterminate state.
import { Checkbox } from '@/components/Checkbox';
export const CheckboxHero = () => ( <div className="flex justify-center"> <Checkbox /> </div>);Installation
- 1
Install dependencies:
npm install @radix-ui/react-checkbox - 2
Add component:
Copy and paste the code into your project’s component directory. Do not forget to update the import paths.// Tremor Raw Checkbox [v0.0.0] import React from "react"import * as CheckboxPrimitives from "@radix-ui/react-checkbox" import { cx, focusRing } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef<typeof CheckboxPrimitives.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitives.Root>>(({ className, checked, ...props }, forwardedRef) => { return ( <CheckboxPrimitives.Root ref={forwardedRef} {...props} checked={checked} className={cx( // base "relative inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded border shadow-sm outline-none transition duration-100 enabled:cursor-pointer", // text color "text-white dark:text-gray-50", // background color "bg-white dark:bg-gray-950", // border color "border-gray-300 dark:border-gray-800", // disabled "data-[disabled]:border-gray-300 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-400", "data-[disabled]:dark:border-gray-700 data-[disabled]:dark:bg-gray-800 data-[disabled]:dark:text-gray-500", // "disabled:dark:border-gray-700 disabled:dark:bg-gray-800 disabled:dark:text-gray-500", // checked and enabled "enabled:data-[state=checked]:border-0 enabled:data-[state=checked]:border-transparent enabled:data-[state=checked]:bg-blue-500", // indeterminate "enabled:data-[state=indeterminate]:border-0 enabled:data-[state=indeterminate]:border-transparent enabled:data-[state=indeterminate]:bg-blue-500", // focus focusRing, className, )} > <CheckboxPrimitives.Indicator className="flex size-full items-center justify-center"> {checked === "indeterminate" ? ( <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <line stroke="currentColor" strokeLinecap="round" strokeWidth="2" x1="4" x2="12" y1="8" y2="8" ></line> </svg> ) : ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M11.2 5.59998L6.79999 9.99998L4.79999 7.99998" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" ></path> </svg> )} </CheckboxPrimitives.Indicator> </CheckboxPrimitives.Root> )})Checkbox.displayName = "Checkbox" export { Checkbox };
Example
import { Checkbox } from '@/components/Checkbox';import { Label } from '@/components/Label';
export const CheckboxDefaultExample = () => ( <div className="flex items-center justify-center gap-2"> <Checkbox id="r1" /> <Label htmlFor="r1">I'd like to be notified by SMS.</Label> </div>);Example: DefaultChecked
import { Checkbox } from '@/components/Checkbox';import { Label } from '@/components/Label';
export const CheckboxDefaultCheckedExample = () => ( <div className="flex items-center justify-center gap-2"> <Checkbox defaultChecked id="r2" /> <Label htmlFor="r2"> I'd like to be notified by SMS. </Label> </div>);Example: Disabled checkbox
import { Checkbox } from '@/components/Checkbox';import { Label } from '@/components/Label';
export const CheckboxDisabledExample = () => ( <div className="flex items-center justify-center gap-2"> <Checkbox disabled id="r1" /> <Label disabled htmlFor="r1"> I'd like to be notified by SMS. </Label> </div>);Example: Indeterminate
State indeterminate is used to represent a mixed or partially selected state, typically used when dealing with hierarchical selections, such as selecting subcategories within a category (e.g., selecting some but not all files within a folder). Also check out this Tremor Block example to see a demo in real life.
import { Checkbox } from '@/components/Checkbox';import { Label } from '@/components/Label';
export const CheckboxIndeterminateExample = () => ( <div className="flex items-center justify-center gap-2"> <Checkbox id="r3" checked="indeterminate" /> <Label htmlFor="r3">Select all rows</Label> </div>);Example: Controlled checkbox
import React from "react"import { Button } from "@/components/Button"import { Checkbox } from "@/components/Checkbox"
export const CheckboxControlledExample = () => { const [checked, setChecked] = React.useState(true)
return ( <div className="flex flex-col items-center gap-4"> <Checkbox checked={checked} onCheckedChange={() => setChecked(!checked)} /> <Button variant="secondary" onClick={() => setChecked(!checked)}> Set {checked ? "Unchecked" : "Checked"} </Button> </div> )}API Reference: Checkbox
This component uses the Radix UI API.