@fluentui/react-field

React Field component for Fluent UI React

Description

Field adds a label, validation message, and hint text to a control. Any single form control can be used as the child of the Field.

Usage

To import Field:

import { Field } from '@fluentui/react-components';

Examples

Works with many form controls, for example:

<>
  <Field label="Name">
    <Input />
  </Field>
  <Field label="Description">
    <Textarea />
  </Field>
  <Field label="Size">
    <RadioGroup>
      <Radio label="Small" />
      <Radio label="Medium" />
      <Radio label="Large" />
    </RadioGroup>
  </Field>
</>

Display hint text:

<Field label="Password" hint="Must be at least 8 characters long.">
  <Input type="password" />
</Field>

Display an error message:

<Field label="Re-enter password" validationMessage="Passwords do not match.">
  <Input type="password" />
</Field>

See Fluent UI Storybook for more detailed usage examples.

Alternatively, run Storybook locally with:

1. yarn start
2. Select react-field from the list.

Specification

See SPEC.md.

Migration Guide

If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating the Field component.