import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import FormLabel from '../FormLabel';

<Meta title="Atoms/Form Label" component={FormLabel} />

# FormLabel
<br />

## `FormLabel` displays label of wrapped input, with * if input is required

The `labelText` props is required for a11y reasons, if not there the `<FormLabel />` will not appear.
<br />

### Default
<Canvas>
    <Story name="Default">
        <FormLabel labelText="Label" htmlFor="name" />
    </Story>
</Canvas>

### Required
<Canvas>
    <Story name="Required">
        <FormLabel labelText="Label" required />
    </Story>
</Canvas>

### No label and no children
<Canvas>
    <Story name="No label and no children">
        <FormLabel />
    </Story>
</Canvas>

### Hidden label
<Canvas>
    <Story name="Hidden label">
        <FormLabel labelText="Label" htmlFor="name" hiddenText>
            <input name="name" />
        </FormLabel>
    </Story>
</Canvas>

### With input
<Canvas>
    <Story name="With input">
        <FormLabel labelText="Label" required htmlFor="name">
            <input name="name" required />
        </FormLabel>
    </Story>
</Canvas>

## Usage Example

```jsx
import FormLabel from '@appdirect/sfb-theme-components/src/atoms/form-label/FormLabel';

<FormLabel labelText="Label" />
```
## Props

<ArgsTable of={FormLabel} />
