Label

PreviousNext

Displays a label for form controls with optional required indicators and subtitle text, built with React Aria's accessibility features.

Component label-demo not found in registry.

Installation

pnpm dlx shadcn@latest add label

Usage

import { Label, LabelAsterisk, LabelSub } from "@/components/ui/label"
<Label>
  Email Address
  <LabelAsterisk />
  <LabelSub>We'll never share your email</LabelSub>
</Label>

Link

You can use the asChild prop to make another component look like a label. Here's an example of a link that looks like a label.

import { Link } from "next/link"
 
import { Label } from "@/components/ui/label"
 
export function LinkAsLabel() {
  return (
    <Label asChild>
      <Link href="/help">Help Documentation</Link>
    </Label>
  )
}