import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { FieldSet } from './field-set.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="FieldSet" component={FieldSet} />

# Field Set

A `FieldSet` groups form components together logically and assigns a label to the entire group. This helps screen readers announce groups of related fields (like Radios) correctly.

Patchwork's `FieldSet` does not supply any presentation on its own, but allows you to use the the layout contructs when laying out your forms.

## Stories

### Demo

<Canvas>
  <Story id="components-inputs-fieldset--default" />
</Canvas>

## Supported Property Mixins

Spacing:

<Canvas>
  <Story id="components-inputs-fieldset--mixins-spacing" />
</Canvas>

Stacking:

<Canvas>
  <Story id="components-inputs-fieldset--mixins-stacked" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-inputs-fieldset--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={FieldSet} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/forms/field-set"
  type="github"
/>