Atoms / Label

Label

<Label />Stable

Accessible label for form controls. Built on Radix Label so click-to-focus works correctly and disabled peers dim automatically.

import { Label } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Marker

State

Context

<Label htmlFor="email">Coach email</Label>
<Input id="email" placeholder="coach@upnext.app" />

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Label } from "@/components/upnext";


<Label>Email</Label>

States

<Label htmlFor="email">Email</Label>

Composition

<div className="grid gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@upnext.com" />
</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.