import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
import { RdxLabelDirective } from '../src/label.directive';
import * as LabelDirectiveStories from './label.stories';

<Meta title="Primitives/Label" />

# Label

#### Renders an accessible label associated with controls.

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

## Features

- ✅ Text selection is prevented when double-clicking label.

## Import

Get started with importing the directive:

```typescript
import { RdxLabelDirective } from '@radix-ng/primitives/label';
```

## Examples

```html
<label rdxLabel htmlFor="uniqId">First name</label>
<input class="Input" id="uniqId" type="text" />
```

## API Reference

<ArgTypes of={RdxLabelDirective} />

## Accessibility

This component is based on the native `label` element, it will automatically apply the correct labelling
when wrapping controls or using the `for` attribute. For your own custom controls
to work correctly, ensure they use native elements such as `button` or `input` as a base.
