Source

Command Palette

Search for a command to run...

Label

Accessible label for form controls with variants and sizes

About Label

Text label component that provides clear identification for form inputs and controls. Built on Radix UI's Label primitive with support for default and secondary variants and three size options. Automatically handles accessibility by associating with controls through htmlFor or nested relationships.

Installation

Import the Label component from LSD:
import { Label } from '@nipsys/lsd'

export default function MyComponent() {
  return <Label />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Variants

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

API Reference

Radix UI Documentation
Label wraps Radix UI primitives
View Radix UI Label documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
ARIA Attributes
Proper ARIA attributes for screen readers
• Uses native label element semantics for proper screen reader support• htmlFor attribute creates explicit association with form controls• Wrapping controls creates implicit association
Focus States
Visible focus indicators for keyboard users
• Labels do not receive focus but clicking or tapping them moves focus to their associated control. Screen readers announce label text when the associated control receives focus.
Field