Label

Inputs

Stablev1.0.0

Accessible label component for form fields with support for required indicators and variants

Preview

Default Label

Required Field

Error Label

Muted Label

Installation

npx @component-labs/cli add label

This will:
- Install required dependencies
- Copy the Label component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Label } from "@component-labs/ui";

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

Props

Name	Type	Default	Description
`variant`	`"default" \| "error" \| "muted"`	`"default"`	Visual style variant
`required`	`boolean`	`false`	Shows a red asterisk (*) indicator
`disabled`	`boolean`	`false`	Applies disabled styling
`htmlFor`	`string`	`-`	ID of the associated form element
`className`	`string`	`-`	Additional CSS classes

Examples

Basic

A simple label

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

Required Field

Label with required indicator

<Label htmlFor="password" required>
  Password
</Label>
<Input id="password" type="password" />

Error State

Label with error styling

<Label htmlFor="username" variant="error" required>
  Username
</Label>
<Input id="username" error="Username is already taken" />

Muted

Label with muted styling

<Label htmlFor="bio" variant="muted">
  Bio (optional)
</Label>
<Textarea id="bio" />

Disabled

Label for disabled field

<Label htmlFor="readonly" disabled>
  Readonly Field
</Label>
<Input id="readonly" disabled />

Performance

Bundle Size

~1KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge

Accessibility

•Proper association with form elements via htmlFor
•Screen reader support
•Visual indicators for required fields
•Accessible error state styling