BrutalLab UI
en
EnglishEspañol
PrimitiveAvailable

Checkbox

Independent selection with checked, mixed, and disabled states.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/checkbox.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <div className="grid gap-5">
      <div className="flex items-center gap-3">
        <Checkbox id="updates" defaultChecked />
        <Label htmlFor="updates">Email me product updates</Label>
      </div>
      <div className="flex items-center gap-3">
        <Checkbox id="disabled-checkbox" disabled />
        <Label htmlFor="disabled-checkbox">Unavailable option</Label>
      </div>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • Document initial, selected, disabled and focus states. Selection changes an indicator or position as well as color.
  • Use Space for selection controls; arrow keys change radios and sliders. Checkbox supports a mixed state.
  • Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
checkedbooleanuncontrolledControlled checked state.
indeterminatebooleanfalseRepresents a partially selected group.
onCheckedChangefunction—Called when the selection changes.

Accessibility

Rules that should remain intact when adapting the component to a product.

Connect every checkbox to a visible label. Use indeterminate for a partially selected group.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.