Label

Labels identify form inputs and communicate whether a field is required or has an error. Pair them with Input, Select, Checkbox, and other form controls.

Interactive preview

Adjust props to see how the Label responds. Pair with a real control using htmlFor and matching id.

Size

Label text

RequiredError

Email address

Props

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Text size. Match with Input size for visual harmony.
error	boolean	false	Applies error styling (red text) to indicate validation failure.
required	boolean	false	Shows a red asterisk after the label text.
htmlFor	string	—	Associates the label with an input via its id. Required for accessibility.
children	ReactNode	—	Label text content.
className	string	""	Additional Tailwind classes merged with Label styles.
...props	LabelHTMLAttributes<HTMLLabelElement>	—	Standard label attributes (id, aria-*, etc.).

Installation

Add the component and token packages to your app:

Install packages

pnpm add @akanaka-design/components @akanaka-design/tokens

Import design tokens and component styles once at the root of your application:

Styles (app root)

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Use the named export from @akanaka-design/components. Associate with an input using htmlFor.

Basic usage

import { Label, Input } from "@akanaka-design/components";

export function Example() {
  return (
    <div>
      <Label htmlFor="email">Email address</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

Required fields

Add the required prop to show a red asterisk:

Required field

<Label htmlFor="email" required>
  Email address
</Label>

Error state

Pass error to indicate validation failure:

Error state

<Label htmlFor="email" error>
  Email address
</Label>
<Input id="email" type="email" error="This field is required" />

Sizes

Match the label size to your input size for visual harmony:

Size variants

{/* Small — for compact forms and tables */}
<Label htmlFor="sm" size="sm">Email</Label>
<Input id="sm" size="sm" />

{/* Medium (default) — standard forms */}
<Label htmlFor="md" size="md">Email</Label>
<Input id="md" size="md" />

{/* Large — onboarding and marketing forms */}
<Label htmlFor="lg" size="lg">Email</Label>
<Input id="lg" size="lg" />

Guidelines

When to use

Above or beside form inputs (Input, Select, Textarea)
With Checkbox and Toggle when the control's built-in label isn't sufficient
In form layouts where accessibility and clarity matter

When not to use

As a standalone heading—use a proper heading element
For helper text below an input—use a separate hint component

Content

Use sentence case ("Email address", not "EMAIL ADDRESS")
Keep labels short and direct
Avoid ending with a colon—the visual relationship is clear without punctuation