Label

Accessible label element with required and error styling.

Introduction

Use Label to associate descriptive text with form controls. Prefer the built-in endLabel / startLabel on Checkbox, Radio, and Switch when the label sits beside the control. Field components such as TextField embed Label via their label prop. Use the standalone Label when you need a label outside those patterns.

Use required to show an asterisk and error for error styling. Typography is controlled with size.

Import

import { Label } from "@bridge-ui/vue/Components/Label";

import { Label } from "@bridge-ui/react/Components/Label";

Basic usage

Use htmlFor (React) or for (Vue) to link the label to an input’s id.

Required

Set required to display a red asterisk after the label text, indicating a mandatory field.

Error state

Set error to apply error label colors when the associated field is invalid.

Sizes

Change the label typography with the size prop. Available sizes: 2xs, xs, sm, md, lg, xl, and 2xl.

Related components

Checkbox, Radio, Switch, TextField

Accessibility

• Renders a native <label> that associates with controls via htmlFor (React) or for (Vue) and a matching control id
• Clicking the label moves focus to the associated control
• The required asterisk is visual only; pair with required on the input for validation semantics
• error applies visual styling; set aria-invalid on the associated control when the field is invalid

Anatomy

<label for="field-id">
  Label text
  <span>*</span>
  <!-- when required -->
</label>

API