Skip to content
CFA Design System

Label

ReactProps
Github icon-storybook-square Storybook Markdown Copy for LLM

The Label provides clear and accessible text descriptions for inputs and interactive UI elements.

Import

import { Label } from "@cfa/react-core";

Live Editor

The <Label /> component is a HTML label element providing the accessibility implementation to their associated elements.

Guidelines

When to use

  • Label is for naming a form control.

Do

  • Use a standalone Label only when composing a custom field. Prefer built-in labels on form components such as TextInput and Select.
  • Write labels in sentence case.
  • Keep Label next to its control in DOM order so click-to-focus works naturally.

Avoid

  • Using a standalone Label without an associated form control.

Examples

Required

The isRequired prop indicates that the associated input is required. It adds a red asterisk to the label.

Disabled

The isDisabled prop indicates that the associated input has disabled styling. It adds a gray color to the label.

Label + Input

For the most part, labels are built-in to the Design System’s components. For example, the TextInput component has a built-in label prop that associates the label with the input. This is the recommended way to use labels in the Design System.

You may also compose your own custom components. For example, you could build your own CustomTextInput component by using the Design System’s Label and Input components.