> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Label

> A styled form label with correct accessibility association — supports required indicators and disabled states.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",gap:"32px",flexWrap:"wrap",alignItems:"flex-start"}}>
  <div style={{display:"flex",flexDirection:"column",gap:"16px",fontFamily:"Inter,sans-serif"}}>
    <div style={{display:"flex",flexDirection:"column",gap:"4px"}}>
      <label style={{fontSize:"13px",fontWeight:500,color:"#344054"}}>Full name</label>

      <input readOnly placeholder="Ahmad Dani" style={{border:"1px solid #D0D5DD",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",color:"#667085",background:"#fff",outline:"none",width:"180px"}} />
    </div>

    <div style={{display:"flex",flexDirection:"column",gap:"4px"}}>
      <label style={{fontSize:"13px",fontWeight:500,color:"#344054"}}>Email <span style={{color:"#DC2626"}}>\*</span></label>

      <input readOnly placeholder="you@example.com" style={{border:"1px solid #D0D5DD",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",color:"#667085",background:"#fff",outline:"none",width:"180px"}} />
    </div>

    <div style={{display:"flex",flexDirection:"column",gap:"4px"}}>
      <label style={{fontSize:"13px",fontWeight:500,color:"#9CA3AF",cursor:"not-allowed"}}>Disabled field</label>

      <input readOnly disabled style={{border:"1px solid #E5E7EB",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",color:"#9CA3AF",background:"#F9FAFB",outline:"none",width:"180px",cursor:"not-allowed"}} />
    </div>
  </div>
</div>

**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

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
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 style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",flexDirection:"column",gap:"4px",maxWidth:"280px"}}>
  <label style={{fontSize:"13px",fontWeight:500,color:"#344054",fontFamily:"Inter,sans-serif"}}>Username</label>

  <input readOnly placeholder="badrinteractive" style={{border:"1px solid #D0D5DD",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",color:"#667085",background:"#fff",outline:"none"}} />
</div>

```tsx theme={null}
<div className="flex flex-col gap-1.5">
  <Label htmlFor="username">Username</Label>
  <Input id="username" placeholder="badrinteractive" />
</div>
```

### Required

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",flexDirection:"column",gap:"4px",maxWidth:"280px"}}>
  <label style={{fontSize:"13px",fontWeight:500,color:"#344054",fontFamily:"Inter,sans-serif"}}>Email address <span style={{color:"#DC2626"}}>\*</span></label>

  <input readOnly placeholder="you@example.com" style={{border:"1px solid #D0D5DD",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",color:"#667085",background:"#fff",outline:"none"}} />
</div>

```tsx theme={null}
<div className="flex flex-col gap-1.5">
  <Label htmlFor="email" required>Email address</Label>
  <Input id="email" type="email" placeholder="you@example.com" required />
</div>
```

### Disabled

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",flexDirection:"column",gap:"4px",maxWidth:"280px"}}>
  <label style={{fontSize:"13px",fontWeight:500,color:"#9CA3AF",fontFamily:"Inter,sans-serif",cursor:"not-allowed"}}>Account type</label>

  <input readOnly disabled value="Enterprise" style={{border:"1px solid #E5E7EB",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",color:"#9CA3AF",background:"#F9FAFB",outline:"none",cursor:"not-allowed"}} />
</div>

```tsx theme={null}
<div className="flex flex-col gap-1.5">
  <Label htmlFor="type" disabled>Account type</Label>
  <Input id="type" value="Enterprise" disabled />
</div>
```

### With Checkbox

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",flexDirection:"column",gap:"8px",fontFamily:"Inter,sans-serif"}}>
  {["Email notifications","SMS alerts","Weekly digest"].map(item => (
      <div key={item} style={{display:"flex",alignItems:"center",gap:"8px",cursor:"pointer"}}>
        <div style={{width:"16px",height:"16px",borderRadius:"4px",border:"1px solid #D0D5DD",background:"#fff",flexShrink:0}}></div>
        <label style={{fontSize:"13px",color:"#344054",cursor:"pointer",fontWeight:500}}>{item}</label>
      </div>
    ))}
</div>

```tsx theme={null}
{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

<ParamField path="htmlFor" type="string">
  The `id` of the associated input element. Required for accessibility.
</ParamField>

<ParamField path="required" type="boolean" default="false">
  Appends a red asterisk `*` after the label text.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Applies muted styling (`#9CA3AF` text, `not-allowed` cursor).
</ParamField>

<ParamField path="className" type="string">
  Additional class names.
</ParamField>

***

## 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

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * 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
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * 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
  </Card>
</CardGroup>