import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
import { RdxCheckboxDirective } from '../src/checkbox.directive';
import * as CheckboxDirectiveStories from './checkbox.stories';

<Meta title="Primitives/Checkbox" />

# Checkbox

#### A control that allows the user to toggle between checked and not checked.

<Canvas sourceState="hidden" of={CheckboxDirectiveStories.Default} />

## Features

- ✅ Full keyboard navigation.
- ✅ Supports indeterminate \_state.
- ✅ Can be controlled or uncontrolled.

## Import

Get started with importing the directives:

```typescript
import { RdxCheckboxDirective, RdxCheckboxInputDirective, RdxCheckboxIndicatorDirective } from '@radix-ng/primitives/checkbox';
```

## Anatomy

```html
<button rdxCheckboxRoot [(checked)]="checked">
  <lucide-angular rdxCheckboxIndicator name="check"></lucide-angular>
  <input class="cdk-visually-hidden" rdxCheckboxInput type="checkbox" />
</button>
```

## API Reference

### RdxCheckboxDirective

<ArgTypes of={RdxCheckboxDirective} />

### RdxCheckboxIndicatorDirective

### RdxRadioIndicatorDirective

## Accessibility

Adheres to the [tri-\_state Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox).

### Keyboard Interactions

<Markdown>
  {`
  | Key | Description |
  | ----------- | --------- |
  | Space       | Checks/unchecks the checkbox.        |
  `}
</Markdown>
