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