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} />