import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Label } from "./Label";
import * as LabelStories from "./Label.stories";

<Meta of={LabelStories} />

# Label

Label is always used in combination with an input component to create a form field.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Label } from "@simplybusiness/mobius";
```

## Examples

<Canvas of={LabelStories.Default} />

## Accessibility

Because Label must always be used in combination with another input component, accessibility rules only apply when used in that context. See the documentation for the field components:

- [Checkbox](/docs/mobius-checkbox--normal)
- [Radio](/docs/mobius-radio--normal)
- [TextField](/docs/mobius-textfield--normal)
- [Select](/docs/mobius-select--normal)

Label supports all React label props. Because `for` is a reserved JavaScript keyword, use the React version `htmlFor` instead.

## Props

<ArgTypes of={Label} />

## Component HTML Structure and Class names

The following HTML is rendered for a Label:

```html
<label class="mobius-label" htmlFor="{input-id}">{Label text}</label>
```
