# Checkbox

A strict, minimalist checkbox devoid of rounded corners and shadows, conforming to Monolith standards.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



A fundamental control that allows the user to toggle between checked and not checked. Built strictly with a `rounded-none` square container and unadorned borders.



<ComponentPreview name="checkbox-demo">
  <div className="flex items-center space-x-2 py-8">
    <Checkbox id="terms" />

    <label htmlFor="terms" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 pt-0.5">
      Accept terms and conditions
    </label>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/checkbox.json"
```

## Usage [#usage]

After adding the component with the CLI, import it into your files:

```tsx
import { Checkbox } from "@/components/ui/checkbox"
```

```tsx
<Checkbox />
```

## Examples [#examples]

### With Text [#with-text]

A standard use-case where the checkbox is paired with a label and a description.

<ComponentPreview name="checkbox-with-text">
  <div className="items-start flex space-x-2 py-8">
    <Checkbox id="terms1" className="mt-0.5" />

    <div className="grid gap-1.5 leading-none">
      <label htmlFor="terms1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
        Accept terms and conditions
      </label>

      <div className="text-sm text-muted-foreground">
        You agree to our Terms of Service and Privacy Policy.
      </div>
    </div>
  </div>
</ComponentPreview>

### Disabled [#disabled]

When the checkbox is disabled, it receives lowered opacity (`opacity-50`) and prevents pointer events, communicating inactivity clearly.

<ComponentPreview name="checkbox-disabled">
  <div className="flex items-center space-x-2 py-8">
    <Checkbox id="terms2" />

    <label htmlFor="terms2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 pt-0.5">
      Accept terms and conditions
    </label>
  </div>
</ComponentPreview>

### With Form [#with-form]

A complete integration with the `Form` component and Zod validation, ensuring robust accessibility.

<ComponentPreview name="checkbox-form">
  <div className="py-8 w-full max-w-sm mx-auto">
    <div className="rounded-none border p-4 space-y-4">
      <div className="flex flex-row items-start space-x-3 space-y-0">
        <Checkbox id="form-checkbox" className="mt-0.5" />

        <div className="space-y-1 leading-none">
          <label htmlFor="form-checkbox" className="text-sm font-medium leading-none">
            Use different settings for my mobile devices
          </label>

          <div className="text-sm text-muted-foreground">
            You can manage your mobile notifications in the mobile settings page.
          </div>
        </div>
      </div>

      <Button type="button">
        Submit
      </Button>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Checkbox` component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Checkbox Documentation](https://www.radix-ui.com/docs/primitives/components/checkbox).

| Prop              | Type                         | Default | Description                                                                                           |
| ----------------- | ---------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
| `checked`         | `boolean \| "indeterminate"` | -       | The controlled checked state of the checkbox.                                                         |
| `defaultChecked`  | `boolean \| "indeterminate"` | -       | The checked state when initially rendered.                                                            |
| `onCheckedChange` | `function`                   | -       | Event handler called when the checked state changes.                                                  |
| `disabled`        | `boolean`                    | `false` | When `true`, prevents the user from interacting with the checkbox.                                    |
| `required`        | `boolean`                    | `false` | When `true`, indicates that the user must check the checkbox before the owning form can be submitted. |

## Monolith Constraints [#monolith-constraints]

1. **Shape**: Must always be `rounded-none` (0px border-radius).
2. **Focus**: Removed multi-layered box-shadow rings. Instead, focus transitions the `border-color` to `foreground` for a sharp 1px focus state that never causes layout shifts.
3. **Animations**: Uses `transition-colors` instead of `transition-all` to ensure absolute layout stability on focus/check interactions.