import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
import * as RadioDirectiveStories from './radio.stories';
import { RdxRadioGroupDirective } from '../src/radio-root.directive';
import { RdxRadioItemDirective } from '../src/radio-item.directive';

<Meta title="Primitives/Radio Group" />

# Radio Group

#### A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

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

## Features

- ✅ Full keyboard navigation.
- ✅ Supports horizontal/vertical orientation.
- ✅ Can be controlled or uncontrolled.

## Import

Get started with importing the directives:

```typescript
import { RdxRadioIndicatorDirective, RadioItemDirective } from '@radix-ng/primitives/radio';
```

## Anatomy

```html
<div rdxRadioRoot>
  <button rdxRadioItem value="default">
    <div rdxRadioIndicator></div>
  </button>
</div>
```

## API Reference

### RadioGroup

`RdxRadioGroupDirective`

<ArgTypes of={RdxRadioGroupDirective} />

### RadioGroupItem

`RdxRadioGroupItemDirective`

<ArgTypes of={RdxRadioItemDirective} />

### RadioIndicator

`RdxRadioIndicatorDirective`

## Accessibility

Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton)
and uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among radio items.

### Keyboard Interactions

<Markdown>
  {`
  | Key | Description |
  | ----------- | --------- |
  | Tab         | Moves focus to either the checked radio item or the first radio item in the group. |
  | Space       | When focus is on an unchecked radio item, checks it.        |
  | ArrowDown   | Moves focus and checks the next radio item in the group.    |
  | ArrowRight  |  Moves focus and checks the next radio item in the group.   |
  | ArrowUp     |  Moves focus to the previous radio item in the group.       |
  | ArrowLeft   |  Moves focus to the previous radio item in the group.       |
  `}
</Markdown>
