import { Meta, ArgTypes } from '@storybook/blocks';
import { Field } from "./index";
import * as Stories from './index.stories';

<Meta of={Stories}/>

# Field

The Field component is used to wrap a form input. As a design system consumer you are
not supposed to directly use it, unless you need to create custom inputs.

**But, as most of Cunningham's components are wrapped inside this component, you may need to customize**
the default width, the generics texts below inputs for example. This documentation is here to show you the
available design token to do so.

## Design tokens

| Token        	| Description                 	|
|---------------	|-----------------------------	|
| width 	| Default width of inputs ( default is 292px ) 	|
| font-size 	| Font size of texts below inputs 	|
| color 	| Font color of texts below inputs 	|

## Props

<ArgTypes of={Field} exclude={["compact"]} />