Label

Renders an accessible label associated with controls.

import { useId } from "react"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputWithLabel() {
  const id = useId()
  return (
    <div className="flex flex-col items-start gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input
        id={id}
        type="email"
        placeholder="you@example.com"
        aria-label="Email"
      />
    </div>
  )
}

Installation

npx love-ui@latest add label

Usage

import { Label } from "@/components/ui/label"

<Label htmlFor="email">Email</Label>

Examples

For accessible labelling and validation, prefer using the FieldLabel component. See some related examples.

With Checkbox

Accept terms and conditions

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxDemo() {
  return (
    <Label>
      <Checkbox />
      Accept terms and conditions
    </Label>
  )
}

Input Menu