Skip to main content

Label

Label is a form label component with size variants and optional required indicator. Use it for standalone labels or when building custom form layouts.

Import​

import { Label } from "@tosui/react";

Basic Usage​

<VStack gap={1} align="stretch">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</VStack>

Required Indicator​

<VStack gap={1} align="stretch">
  <Label htmlFor="username" required>Username</Label>
  <Input id="username" placeholder="Enter username" />
</VStack>

Sizes​

<VStack gap={4} align="flex-start">
  <Label size="xs">Extra small label</Label>
  <Label size="sm">Small label (default)</Label>
  <Label size="md">Medium label</Label>
  <Label size="lg">Large label</Label>
</VStack>

Weights​

<VStack gap={4} align="flex-start">
  <Label weight="normal">Normal weight</Label>
  <Label weight="medium">Medium weight (default)</Label>
  <Label weight="semibold">Semibold weight</Label>
  <Label weight="bold">Bold weight</Label>
</VStack>

When to Use​

  • Use Label when you need standalone labels or custom form layouts
  • Use FormField when you need labels with helper text, error messages, and automatic accessibility linking

Custom Form Layout​

<Box display="grid" gridTemplateColumns="120px 1fr" gap={4} alignItems="center">
  <Label htmlFor="first-name">First Name</Label>
  <Input id="first-name" placeholder="John" />

  <Label htmlFor="last-name">Last Name</Label>
  <Input id="last-name" placeholder="Doe" />

  <Label htmlFor="email" required>Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</Box>

Props Reference​

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg""sm"Label font size
weight"normal" | "medium" | "semibold" | "bold""medium"Label font weight
requiredbooleanfalseShow required asterisk
htmlForstring-ID of the associated form control
asElementType"label"HTML element to render

Label also accepts all Box styling props.

Accessibility​

  • Renders as a native <label> element by default
  • Use htmlFor to associate with the form control's id
  • The required asterisk includes aria-hidden="true" (screen readers announce "required" via the input's aria-required)

TypeScript​

import { Label, type LabelProps, type LabelOwnProps } from "@tosui/react";