import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import FormLabel from '../FormLabel';
import * as FormLabelStories from './FormLabel.stories';

<Meta of={FormLabelStories} />

# 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 of={FormLabelStories.Default} />
</Canvas>

### Required

<Canvas>
  <Story of={FormLabelStories.Required} />
</Canvas>

### No label and no children

<Canvas>
  <Story of={FormLabelStories.NoLabelAndNoChildren} />
</Canvas>

### Hidden label

<Canvas>
  <Story of={FormLabelStories.HiddenLabel} />
</Canvas>

### With input

<Canvas>
  <Story of={FormLabelStories.WithInput} />
</Canvas>

## Usage Example

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

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

## Props

<ArgsTable of={FormLabel} />
