Label

Renders an accessible label associated with controls.

Import

import { Label } from '@akitectio/aki-ui'

Basic Usage

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

With Checkbox

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label>
</div>

Required Field

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="username">
    Username <span className="text-red-500">*</span>
  </Label>
  <Input type="text" id="username" placeholder="Username" />
</div>

Disabled Field

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="disabled" className="opacity-50">
    Disabled Field
  </Label>
  <Input type="text" id="disabled" placeholder="Disabled" disabled />
</div>