Label

Renders an accessible label associated with controls.

children

for

#Installation

bunx --bun barefoot add label

#Usage

1import { Label } from "@/components/ui/label"2import { Input } from "@/components/ui/input"34function LabelDemo() {5  return (6    <div className="grid w-full max-w-sm items-center gap-1.5">7      <Label for="email">Email</Label>8      <Input type="email" id="email" placeholder="Email" />9    </div>10  )11}

#Examples

#Form

Name

1import { Label } from '@/components/ui/label'23function LabelForm() {4  return (5    <div className="flex flex-col gap-4 max-w-sm">6      <div className="grid w-full items-center gap-1.5">7        <Label for="name">Name</Label>8        <input id="name" type="text" placeholder="Enter your name" />9      </div>10      <div className="grid w-full items-center gap-1.5">11        <Label for="email">Email</Label>12        <input id="email" type="email" placeholder="Enter your email" />13      </div>14    </div>15  )16}

#Disabled

Disabled field

1import { Label } from '@/components/ui/label'23function LabelDisabled() {4  return (5    <div className="group" data-disabled="true">6      <Label for="disabled-input">Disabled field</Label>7      <input id="disabled-input" type="text" disabled placeholder="Cannot edit" />8    </div>9  )10}

#API Reference

Prop	Type	Default	Description
for	string	-	The id of the form control this label is associated with.
className	string	-	Additional CSS class names.
children	Child	-	The content displayed inside the label.