import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
import { switchExclude } from '../../../../apps/storybook-radix/docs/utils/storybook';
import { RdxSwitchRootDirective } from '../src/switch-root.directive';
import * as SwitchDirectiveStories from './switch.stories';

<Meta title="Primitives/Switch" />

# Switch

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

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

## Features

- ✅ Full keyboard navigation.
- ✅ Can be controlled or uncontrolled.

## Import

Get started with importing the directives:

```typescript
import { RdxSwitchRootDirective, RdxSwitchThumbDirective, RdxSwitchInputDirective } from '@radix-ng/primitives/switch';
```

## Examples

```html
<label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
<button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
  <span rdxSwitchThumb></span>
</button>
```

```html
<label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
<button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
  <input rdxSwitchInput />
  <span rdxSwitchThumb></span>
</button>
```

## API Reference

### Root

`RdxSwitchRootDirective`
<ArgTypes exclude={switchExclude} of={RdxSwitchRootDirective} />

<Markdown>
  {`
  | Data Attribute     | Value |
  | ------------------ | -------------------------- |
  | [data-state]       | "checked" or "unchecked"   |
  | [data-disabled]    | Present when disabled      |
  `}
</Markdown>

### Thumb

`RdxThumbDirective`
<Markdown>
  {`
  | Data Attribute     | Value |
  | ------------------ | -------------------------- |
  | [data-state]       | "checked" or "unchecked"   |
  | [data-disabled]    | Present when disabled      |
  `}
</Markdown>

## Accessibility

Adheres to the [`switch` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/switch).

### Keyboard Interactions

<Markdown>
  {`
  | Key | Description |
  | ----------- | --------- |
  | Space       | Toggles the component's state.        |
  | Enter       | Toggles the component's state.    |
  `}
</Markdown>

### Screen Reader

Switch component uses a hidden native checkbox element with `switch` role internally that is only visible to screen readers.
Value to describe the component can either be provided via `label` tag using `ariaLabelledBy`, `ariaLabel` props.

```html
<label for="switch1">Remember Me</label>
<button rdxSwitchRoot id="switch1" ></button>

<span id="switch2">Remember Me</span>
<button rdxSwitchRoot ariaLabelledBy="switch2"></button>

<button rdxSwitchRoot ariaLabel="Remember Me"></button>
```


## Examples

### Reactive Forms

Switch can also be used with reactive forms. In this case, the `formControlName` property is used to bind the component to a form control.

<Canvas sourceState="hidden" of={SwitchDirectiveStories.ReactiveForm} />

### Disabled

When `disabled` is present, the element cannot be edited and focused.

<Canvas sourceState="hidden" of={SwitchDirectiveStories.Disabled} />

### Preselection

Enabling `checked` property displays the component as active initially.

<Canvas sourceState="hidden" of={SwitchDirectiveStories.Preselection} />
