Label

Accessible form label via Radix UI

With Input

Usage

import { Label } from '@tryvienna/ui'

<Label>Email address</Label>

Examples

Default

Default

<Label>Email address</Label>

With Input

With Input

<div className="grid gap-2 w-80">
  <Label htmlFor="username">Username</Label>
  <Input id="username" placeholder="Enter username" />
</div>

With Checkbox

With Checkbox

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Disabled Sibling

Disabled Sibling

<div className="grid gap-2 w-80">
  <Label htmlFor="disabled-input">Disabled field</Label>
  <Input id="disabled-input" placeholder="Cannot edit" disabled />
</div>

Required

Required

<div className="grid gap-2 w-80">
  <Label htmlFor="required-field">
    Email <span className="text-destructive">*</span>
  </Label>
  <Input id="required-field" type="email" placeholder="required@example.com" required />
</div>

API Reference

Label

Also accepts all props from LabelPrimitive.Root.

Data Attributes

Component	data-slot
Label	"label"