Component · <input type="checkbox">

Checkbox

A real checkbox with a custom box, including the indeterminate dash.

Email me about repliesSome projects selectedUnavailable

Install

npx @lazizbekio/mitame add checkbox

Usage

import { Checkbox } from "@/components/mitame/ui/checkbox";

export default function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Checkbox defaultChecked>Email me about replies</Checkbox>
      <Checkbox indeterminate>Some projects selected</Checkbox>
      <Checkbox disabled>Unavailable</Checkbox>
    </div>
  );
}

Props

Prop	Type	Default	Description
`indeterminate`	`boolean`	`false`	Shows a dash. The browser clears it on the next click.
`children`	`ReactNode`	—	The label.
`...props`	`InputHTMLAttributes`	—	checked, defaultChecked, onChange, name, disabled…

Keyboard

Key	Does
`Space`	Toggle

Styling

Every part has a data-slot starting with checkbox, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.