import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
import * as ToggleDirectiveStories from './toggle.stories';
import { RdxToggleDirective } from '../src/toggle.directive';
import { RdxToggleVisuallyHiddenInputDirective } from '../src/toggle-visually-hidden-input.directive';

<Meta title="Primitives/Toggle" />

# Toggle

#### A two-\_state button that can be either on or off.

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

## Features

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

## Import

Get started with importing the directives:

```typescript
import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
```

## Anatomy

```html
<button rdxToggle aria-label="Toggle italic">
  <icon />
</button>
```

## API Reference

### Toggle

`RdxToggleDirective`

The toggle.

<ArgTypes of={RdxToggleDirective} />

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

### ToggleInput

`RdxToggleVisuallyHiddenInputDirective`

Directive for a visually hidden `<input />`element, specifically designed for use with toggle components.
This directive simplifies the integration of hidden form inputs in toggle components, ensuring compatibility with form handling while maintaining a clean and accessible design.


## Accessibility

### Keyboard Interactions

<Markdown>
  {`
  | Key | Description |
  | ----------- | --------- |
  | Space       | Activates/deactivates the toggle.       |
  | Enter       | Activates/deactivates the toggle.  |
  `}
</Markdown>


## Examples

### Reactive Forms

Toggle 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={ToggleDirectiveStories.ReactiveForm} />

### Disabled

When disabled is present, the element cannot be edited and focused.
<Canvas sourceState="hidden" of={ToggleDirectiveStories.Disabled} />
