import { Meta, ArgTypes } from '@storybook/blocks';
import { Field } from './Field';
import { Input } from '../Input/Input';
import { ExampleFrame } from '../../utils/storybook/ExampleFrame';

<Meta title="MDX|Field" component={Field} />

# Field

`Field` is the basic component for rendering form elements together with labels and description.

## When to use

The Field component is suitable for various scenarios where you need to incorporate form inputs into your application. Some common use cases include:

- Creating forms with labeled input elements.
- Adding descriptions to help users understand the purpose of the input.
- Applying validation and error messages to form fields.
- Indicating loading or disabled states for input fields.

### Usage

<ExampleFrame>
  <Field label="API key" description="Your instance API key">
    <Input id="api-key" />
  </Field>
</ExampleFrame>

Note that the Field component will pass the `invalid`, `disabled` and `loading` props, unless they are `undefined`, to the child component, which will override those props if they are set on the child component.

### Do's

- Provide a meaningful label for the field to enhance accessibility.
- Provide a description for the field to help users understand the purpose of the input.

### Don'ts

- Use the `description` prop without also providing a label.
- Use the `invalid` prop without also providing an error message.

### Validation

Use the `invalid` prop to indicate that the input is invalid. This will add a red border to the input and display the error message provided in the `error` prop. For this to work, both the `invalid` and `error` props must be set.

### Loading

Use the `loading` prop to indicate that the input is loading. This will add a spinner to the input.

### Props

<ArgTypes of={Field} />
