Skip to main content

Field
ready
Storybook

The Field component is a wrapper for handling form input elements, such as text inputs, switches, or other custom input components, within a form. It provides features like labelling, descriptions, validation states, and layout options.

When to use​

The Field component is suitable for various scenarios where you need to incorporate form inputs into your React 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.

Implementation / Options​

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.

Loading...
Live Editor
<Field label="API key" description="Your instance API key">
  <Input id="api-key" />
</Field>

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.

Playground​