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.

<script setup lang="ts">
import { Label } from "@bridge-ui/vue/Components/Label";
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label :for="'email'">Email</Label>

    <input
      id="email"
      type="email"
      placeholder="[email protected]"
      class="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
    />
  </div>
</template>

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

export default function LabelBasic() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="email">Email</Label>

      <input
        id="email"
        type="email"
        placeholder="[email protected]"
        className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
      />
    </div>
  );
}

Required

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

<script setup lang="ts">
import { Label } from "@bridge-ui/vue/Components/Label";
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label required :for="'name'">Full name</Label>

    <input
      id="name"
      type="text"
      class="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
    />
  </div>
</template>

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

export default function LabelRequired() {
  return (
    <div className="flex flex-col gap-2">
      <Label required htmlFor="name">
        Full name
      </Label>

      <input
        id="name"
        type="text"
        className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900"
      />
    </div>
  );
}

Error state

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

<script setup lang="ts">
import { Label } from "@bridge-ui/vue/Components/Label";
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label error :for="'username'">Username</Label>

    <input
      type="text"
      id="username"
      aria-invalid="true"
      class="border-error-500 rounded-md border px-3 py-2 text-sm dark:bg-gray-900"
    />
  </div>
</template>

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

export default function LabelError() {
  return (
    <div className="flex flex-col gap-2">
      <Label error htmlFor="username">
        Username
      </Label>

      <input
        type="text"
        id="username"
        aria-invalid="true"
        className="border-error-500 rounded-md border px-3 py-2 text-sm dark:bg-gray-900"
      />
    </div>
  );
}

Sizes

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

<script setup lang="ts">
import { Label } from "@bridge-ui/vue/Components/Label";
</script>

<template>
  <div class="flex flex-col gap-3">
    <Label size="2xs" for="field-2xs">Label 2xs</Label>
    <Label size="xs" for="field-xs">Label xs</Label>
    <Label size="sm" for="field-sm">Label sm</Label>
    <Label size="md" for="field-md">Label md</Label>
    <Label size="lg" for="field-lg">Label lg</Label>
    <Label size="xl" for="field-xl">Label xl</Label>
    <Label size="2xl" for="field-2xl">Label 2xl</Label>
  </div>
</template>

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

export default function LabelSizes() {
  return (
    <div className="flex flex-col gap-3">
      <Label size="2xs" htmlFor="field-2xs">
        Label 2xs
      </Label>
      <Label size="xs" htmlFor="field-xs">
        Label xs
      </Label>
      <Label size="sm" htmlFor="field-sm">
        Label sm
      </Label>
      <Label size="md" htmlFor="field-md">
        Label md
      </Label>
      <Label size="lg" htmlFor="field-lg">
        Label lg
      </Label>
      <Label size="xl" htmlFor="field-xl">
        Label xl
      </Label>
      <Label size="2xl" htmlFor="field-2xl">
        Label 2xl
      </Label>
    </div>
  );
}

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

Prop	Type	Default	Description
children	ReactNode	—	Label content.
classes	LabelClasses	—	Classes for root and required.
error	boolean	false	Applies error label colors.
htmlFor	string	—	Associates the label with a form control (React).
for	string	—	Associates the label with a form control (Vue).
required	boolean	false	Shows a red required asterisk after the label text.
size	LabelSize	"md"	Typography scale aligned with TextField sizes.