import {
  Canvas,
  Meta,
  Story,
  Stories,
  Controls,
} from '@storybook/addon-docs/blocks';
import { Default as FieldDefault } from '../plugins/field/FieldComponent.stories.js';
import { Default as TextDefault } from '../components/form/BmsInputText.stories.js';
import { Default as SelectDefault } from '../components/form/BmsSelect.stories.js';

<Meta title="Documentation/Fields/Anatomy" />

# <img src="./BmsIcon.png" /> Fields

Field labels give context to the information that a user needs to input. They're commonly used in forms.

![](./fields/CoverFieldsAnatomy.png)

## Label

### Anatomy

Labels give context to the information that a user needs to input. They're commonly used in forms.

![](./fields/LabelRepresentation.png)

#### Usage

Inputs should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. For exemple the input search.

#### Rules

<table>
  <tr>
    <td>✅ Do</td>
    <td>⛔ Don&#39;t</td>
  </tr>
  <tr>
    <td>![](./fields/LabelDo.png)</td>
    <td>![](./fields/LabelDont.png)</td>
  </tr>
</table>
*Don’t add a colon at the end of a field label*

## Caption Text

![](./fields/CaptionTextRepresentation.png)

#### Usage

#### Rules
