Thrive Design System

Components

Label

A text label component that provides accessible identification for form inputs and interactive elements.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Label } from '@thrivecart/ui';

Examples

Basic Label

With Input

Label associated with a text input

<div className="flex flex-col gap-1.5">
<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>

Best Practices

✓

Always pair labels with inputs

Every form input should have an associated label using the htmlFor attribute.

✓

Keep labels concise

Use clear, short labels that describe the expected input.

✗

Don't hide labels

Visible labels are essential for usability. Avoid visually hiding labels in favor of placeholders.

✗

Don't use labels for instructions

Keep labels brief. Use helper text for additional guidance.

Props

Props

Accessibility

  • Clicking the label focuses the associated input.
  • Screen readers announce the label when the input receives focus.
  • Uses the native <label> element for maximum compatibility.