Label

import { Label } from '@yarcl/react';

Label is the label Field renders, available on its own for layouts Field doesn’t cover. Add a variant to render a filled label like a tag.

City *

Nickname

ActivePendingFailedNew

<Inline gap="sm">
  <Label htmlFor="city" required>City</Label>
  <Input id="city" required />
</Inline>

<Inline gap="sm">
  <Label htmlFor="nickname" disabled>Nickname</Label>
  <Input id="nickname" disabled />
</Inline>

<Label variant="soft" color="success" radius="rounded">Active</Label>
<Label variant="solid" color="primary" size="lg">New</Label>

One label for several controls

Give the label an id and point a group’s aria-labelledby at it. Each control inside keeps its own name.

Date of birth

<Label id="birth">Date of birth</Label>
<Inline role="group" aria-labelledby="birth">
  <Input aria-label="Day" />
  <Input aria-label="Month" />
  <Input aria-label="Year" />
</Inline>

Custom controls

Controls that aren’t native form elements, like ToggleGroup, are named with aria-labelledby the same way.

Digest frequency

DailyWeeklyMonthly

<Label id="frequency" color="primary">Digest frequency</Label>
<ToggleGroup type="single" defaultValue="weekly" aria-labelledby="frequency">
  <ToggleGroup.Item value="daily">Daily</ToggleGroup.Item>
  <ToggleGroup.Item value="weekly">Weekly</ToggleGroup.Item>
  <ToggleGroup.Item value="monthly">Monthly</ToggleGroup.Item>
</ToggleGroup>

Styling

• The text style is defaults.labelStyle; textStyle picks another from typography.styles.
• color colors the text. A variant adds a background and border from the same variant recipes as buttons.
• size scales the font size from your size scale, and radius rounds a filled label.
• disabled uses the muted color.
• The required marker uses defaults.errorColor.
• Every styling prop can be set for all labels in components.Label.

Accessibility

• Renders a native <label>. With htmlFor, clicking it focuses or toggles the control, and its text becomes the control’s accessible name.
• The label is not a tab stop; keyboard users reach the control directly.
• The required marker is hidden from screen readers. Set required (or aria-required) on the control too, so it is announced.

Props

Accepts every native <label> attribute except color.

Prop	Type	Default	Description
color	Colorconfig		Semantic color, from the colors config. Colors the label text; neutral when omitted.
disabled	boolean		Uses the muted color, to match a disabled control.
radius	'size' | Radiusconfig	config.defaults.radius	Corner radius, from the radii config.
required	boolean		Shows a required marker in defaults.errorColor. The marker is hidden from screen readers, so also set required (or aria-required) on the control.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'		Font size scale, from the sizes config. Uses the text style's size when omitted.
textStyle	TextStyleconfig	config.defaults.labelStyle	Text style, from the typography.styles config.
variant	Variantconfig		Style recipe, from this component's variant map or shared variants, for a filled label. Plain when omitted.