Westy Design Systemv0.2.7
OverviewComponentsExamplesStorybook

Foundations

  • Typography
  • Colors
  • Spacing
  • Radius
  • Shadows
  • Icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Questionnaire
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip

Chat

  • Attachment
  • Bubble
  • Marker
  • Message
  • Message Scroller

Components

Label

Renders an accessible label associated with controls.

Playground

—children
—htmlFor
—disabled
Usage
Import Label from the design system and point htmlFor at the id of the control it describes. Label ships no color tokens of its own — it inherits the surrounding text color.
import { Label } from "@workspace/ui/components/label"

<Label htmlFor="email">Your email address</Label>
With Checkbox
Clicking the label toggles the associated checkbox.
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>
With Input
Place the label above the input and connect the two with htmlFor, so clicking the label focuses the field.
<div className="grid w-full max-w-sm gap-3">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Email" />
</div>
Disabled
When a sibling control rendered before the label is disabled, the peer-disabled styles dim the label automatically — Checkbox and Switch mark themselves as peers. Inside a disabled Field group the group-data-[disabled=true] variant does the same.
<div className="flex items-center gap-2">
  <Checkbox id="newsletter" disabled />
  <Label htmlFor="newsletter">Subscribe to the newsletter</Label>
</div>
<div className="flex items-center gap-2">
  <Switch id="marketing" disabled />
  <Label htmlFor="marketing">Marketing emails</Label>
</div>
Building forms
For complete forms, reach for the Field family — FieldLabel builds on Label and pairs it with descriptions and error handling via FieldDescription and FieldError. See the Field page for the full API.
<Field>
  <FieldLabel htmlFor="name">Name</FieldLabel>
  <Input id="name" />
  <FieldDescription>Shown on your public profile.</FieldDescription>
</Field>
RTL
Labels work in right-to-left layouts out of the box — the internal gap uses logical properties, so no extra classes are needed.
<div dir="rtl" className="flex items-center gap-2">
  <Checkbox id="terms-rtl" />
  <Label htmlFor="terms-rtl">أوافق على الشروط والأحكام</Label>
</div>
API Reference
Label wraps the Radix Label primitive, renders a native label element, and accepts all of its props.
PropTypeDefault
htmlForstring—
asChildbooleanfalse

Tokens used

3 design tokens consumed by the Label component.

  • --text-sm

    Text Small (14px)

    text-sm

  • --font-weight-medium

    Font weight Medium (500)

    font-medium

  • --spacing

    Spacing unit (4px)

    gap-2