Label

An accessible label element that renders text for form controls. Built on Radix UI Label for proper accessibility associations.

Preview

Default Label

Label with Input

Label with Checkbox

Required Label

Usage

tsx
import { Label } from "zostel-ui";
import { Input } from "zostel-ui";

<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" placeholder="you@zostel.com" />

{/* With required indicator */}
<Label>Phone <span className="text-zostel-orange">*</span></Label>

Props

htmlFor
Type: string
Default: —

The ID of the form element this label is for.

className
Type: string
Default: ""

Additional CSS classes to apply.

asChild
Type: boolean
Default: false

Render as a child element using Radix Slot.
Previous Textarea Next Select