Label — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

Complete project setup first. Your configuration must select react/radix and include your Design System ID.

pnpm exec frontfriend download label -f react --primitive radix

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Label } from "@/components/ui/label";
<Label variant="main" disabled={false}>Your email address</Label>;

Examples

Default

import { Label } from "@/components/ui/label";
<Label >Your email address</Label>;

With Input

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>;

Required

import { Label } from "@/components/ui/label";
<Label htmlFor="username">
  Username <span className="text-negative-strong">*</span>
</Label>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

Prop	Type	Default	Description
`disabled`	`boolean`	`—`	Render the label in a disabled state.
`variant`	`"main" \| "secondary"`	`—`	Visual variant of the label.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.