@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:
yarn start
- 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.