Label

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>
  )
}

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

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

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

{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>
))}