Label

🌓Dark Mode Compatible

Overview

Label provides accessible, consistent text for form controls. Use it to associate readable text with inputs and other controls.

Live Demo

Live demoInteractive

Full Name

Anatomy

• Root: The label element.
• Text: The label content.

Usage

import { Input, Label } from '@grasdouble/lufa_design-system';

export function Example() {
  return (
    <div>
      <Label htmlFor="fullname">Full Name</Label>
      <Input id="fullname" />
    </div>
  );
}

Props

Prop	Type	Default	Description
htmlFor	string	undefined	The id of the input this label controls.
as	ElementType	'label'	Polymorphic prop to render a different element.
children	ReactNode	undefined	The label text.
className	string	undefined	Additional CSS classes.

Accessibility

Always match htmlFor with the target input id to ensure screen readers announce the label.

Theming & Tokens

Label uses typography tokens for font size and color, and updates with theme changes.

Do / Don’t

Do

Keep label text short and descriptive.

Don’t

Avoid wrapping inputs inside labels unless you need that structure for layout.

Related Components

• Input