Legend
Component
Live
The Legend component guides a user on the expected selection for a group of form fields.
- Usage
- Examples
- Properties
- Accessibility
- CSS Variables
Usage
Legends are the question text for a group of form fields. They improve the usability of form fields by clearly identifying the purpose and expected selection of a group of options.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Legend } from "@iag/chroma-react-ui.components";
When to use
Use Legends for groups of form fields to clearly identify its purpose, guide user input and improve form accessibility. For example, Radios and Checkboxes.
When to avoid
Avoid using Legends for general text content when it’s not associated with a group of fields. Also avoid if you have a single form field, like Input or Select. In these instances, use the Label component.
Do
- Do ensure that the text of Legends is clear and descriptive.
- Do accompany Legends with help text for additional context or prompts.