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

<Meta of={FieldsetStories} />

# Fieldset

Fieldset can be used to group form fields together.

## Install

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

## Usage

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

## Examples

### Default

<Canvas of={FieldsetStories.Default} />

### With Legend

<Canvas of={FieldsetStories.WithLegend} />

## Accessibility

A `legend` can provided to help screen readers spell out the fieldset name when interacting with the fields that are contained in it.

## Props

<ArgTypes of={Fieldset} />

## Component HTML Structure and Class names

The following HTML is rendered for a Fieldset:

```html
<div class="mobius-fieldset" role="group" aria-labelledby=":r0:">
  <legend id=":r0:" class="mobius-fieldset__legend">Legend text</legend>
  (collection of <input />...)
</div>
```
