Skip to main content

​
Overview

Label renders an accessible <label> element with A’raf DS typography tokens. It automatically associates with its input via htmlFor, and supports required indicators (*) and disabled styling.

​
Installation

npm install @araf-ds/core

​
Usage

import { Label } from "@araf-ds/core"
import { Input } from "@araf-ds/core"

export default function Example() {
  return (
    <div className="flex flex-col gap-1.5">
      <Label htmlFor="name">Full name</Label>
      <Input id="name" placeholder="Ahmad Dani" />
    </div>
  )
}

​
Variants

​
Default

<div className="flex flex-col gap-1.5">
  <Label htmlFor="username">Username</Label>
  <Input id="username" placeholder="badrinteractive" />
</div>

​
Required

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email" required>Email address</Label>
  <Input id="email" type="email" placeholder="[email protected]" required />
</div>

​
Disabled

<div className="flex flex-col gap-1.5">
  <Label htmlFor="type" disabled>Account type</Label>
  <Input id="type" value="Enterprise" disabled />
</div>

​
With Checkbox

{options.map(option => (
  <div key={option.id} className="flex items-center gap-2">
    <Checkbox id={option.id} />
    <Label htmlFor={option.id}>{option.label}</Label>
  </div>
))}

​
API Reference

​
htmlFor
string
The id of the associated input element. Required for accessibility.
​
required
boolean
default:"false"
Appends a red asterisk * after the label text.
​
disabled
boolean
default:"false"
Applies muted styling (#9CA3AF text, not-allowed cursor).
​
className
string
Additional class names.

​
Accessibility

  • Label renders as a native <label> element — never as a <span> or <div>
  • htmlFor must match the id of the associated input to create a programmatic link
  • When required is set, the * indicator is visually shown and the linked input should also have the HTML required attribute
  • Clicking the label moves focus to the associated input — this is native browser behavior and must not be overridden
  • When using Label with Checkbox or Switch, wrap both in a <label> or use htmlFor + id — never rely on proximity alone

​
Do’s & Don’ts

Do

  • Always provide a Label for every form control
  • Match htmlFor to the input’s id exactly
  • Mark required fields with both the required prop and HTML required attribute
  • Use Label’s disabled prop to visually match the state of a disabled input

Don't

  • Don’t use placeholder text as a substitute for a visible Label
  • Don’t use a <span> or <div> for labels — use this component
  • Don’t omit htmlFor — screen readers won’t associate the label with the input
  • Don’t put long instructions in a Label — use FormDescription for that