Field Label

Field Label displays the text that describes the purpose of a form field.

When to use / When not to use

When to use

Use a Field Label to identify the purpose of an input, select, or textarea element.
Use the Required state when the associated field must be filled out.
Use the Optional state when the field can be left empty.
Use the Disabled state when the associated field is not interactive.

When not to use

Don’t use a Field Label as a heading or section title; choose a heading component instead.
Don’t rely on the label alone to convey required status; include the required indicator in the label text.
Don’t hide the label visually while keeping it in the DOM; use a visible label for all interactive fields.

Variant	Description	When to use
Required	Shows the label with a required indicator (e.g., an asterisk).	For fields that must be completed before submission.
Optional	Shows the label without a required indicator, optionally with “(optional)” text.	For fields that may be left empty.
Disabled	Shows the label in a disabled style to match a disabled form control.	When the associated field is disabled and cannot receive input.

This component does not expose any configurable props.

Associate the label with its form control using the native <label> element and the control’s id attribute.
Ensure the required indicator is announced by screen readers (e.g., include “required” in the label text).
Preserve sufficient contrast between the label text and the background in all states.
When the label is in the Disabled state, keep it programmatically linked to the disabled control so assistive technology reflects the disabled status.