labsUI

Checkbox

Native checkbox with a spring-drawn check mark and an indeterminate state for select-all rows. Controlled or uncontrolled; submits with forms.

npx @kznlabs/labsui add checkbox
"use client";import { useState } from "react";import { Checkbox } from "@/components/ui/checkbox";import { Label } from "@/components/ui/label";export function SelectAll({ items }: { items: string[] }) {  const [on, setOn] = useState<string[]>([]);  const all = on.length === items.length;  return (    <div className="flex items-center gap-2.5">      <Checkbox        id="all"        checked={all}        indeterminate={on.length > 0 && !all}        onCheckedChange={() => setOn(all ? [] : items)}      />      <Label htmlFor="all">Select all</Label>    </div>  );}

<Checkbox>

Native checkbox with a spring-drawn check. Controlled or uncontrolled; works inside <Field>.

  • checked
    boolean

    Controlled state; pair with onCheckedChange.

  • defaultCheckeddefault false
    boolean

    State at first render (uncontrolled).

  • indeterminatedefault false
    boolean

    Mixed state, e.g. a "select all" with some rows selected. Shows a dash.

  • onCheckedChange
    (checked: boolean) => void

    Called with the new state.

PropTypeDefault
checked

Controlled state; pair with onCheckedChange.

boolean—
defaultChecked

State at first render (uncontrolled).

booleanfalse
indeterminate

Mixed state, e.g. a "select all" with some rows selected. Shows a dash.

booleanfalse
onCheckedChange

Called with the new state.

(checked: boolean) => void—

Also accepts every <input> prop.

* required. Every component also takes className.