Label

Introduction

Labels are short, descriptive text that identifies the purpose of a form field or piece of information. They help users understand what is expected of them and improve accessibility by associating descriptive text with input fields.

Use the standalone Label component when you need a label outside of Bifrost's input components. Bifrost inputs like Input, TextArea, Checkbox, Select, and DatePicker already provide their own label prop and should not be combined with Label.

Variants

• Basic label: Standalone label text for a field or value
• Required: Indicates the field must be filled in
• Optional: Indicates the field is not mandatory
• Disabled / Read-only: Indicates the related field is not editable

Interactive demo

Try the interactive demo below to explore the Label component.

Anatomy

A label can be combined with other elements to communicate context and value:

• Label text: Descriptive text that identifies the field
• Icon: Optional icon nested inside the label for visual context
• Description (helpertext): Additional context or instructions related to the label
• Value: The content the label is describing
• State suffix: "(required)" or "(optional)" appended after the label text, or a lock icon for disabled and read-only states

Required and optional

When labeling required or optional fields, use the required or optional prop to add a clear suffix after the label text. Stay consistent within a single form: either mark all required fields, or mark all optional fields — don't mix both.

For more context on marking fields in forms, see the Forms documentation.

Disabled vs read-only

Like other Bifrost form components, Label supports both disabled and read-only states. Both display a lock icon after the label text to signal the field can't be edited.

• Disabled: Use when the field is temporarily unavailable. Cannot be focused or read by screen readers, and does not meet WCAG contrast requirements.
• Read-only: Use when displaying information the user can read but not edit. The value remains accessible to screen readers.

In general, prefer read-only over disabled for better accessibility.

Best practices

• Be concise and descriptive: Use short, clear labels that explain the purpose of the field. Avoid filler words.
• Use sentence case: Capitalize only the first word and any proper nouns.
• Don't replace labels with placeholders: Placeholders disappear when users start typing and aren't reliable for screen readers.
• Stay consistent: Mark either all required fields or all optional fields in a form — not both.

Related components