Component

Label

Give form controls a visible, clickable name while preserving the native label relationship.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Label } from "@chitrank2050/monoline-ui/label"

Basic usage

<Label htmlFor="project-name">Project name</Label>
<Input id="project-name" placeholder="Monoline UI" />

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Label gives a form control a visible name and lets pointer users focus or activate that control from its text.

Avoid when

The text is only a heading, helper copy, or a visual caption for content that is not a form control.

Accessibility

Set htmlFor to the associated control ID unless the control is nested. Keep the visible wording specific and do not rely on placeholder text as the label.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

htmlForstringID of the associated form control

childrenReactNodeVisible label copy

Design tokens

Theme variables this component reads for color, spacing, and motion.

--text-primaryCSS varLabel color

--text-smCSS varLabel scale

Implementation

The source used by the example above, including any state it needs.

<Label htmlFor="project-name">Project name</Label>
<Input id="project-name" placeholder="Monoline UI" />

Compare related components or review the package and theme setup.

01ComponentFieldComponent · ReferenceReference→02ComponentInputComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview