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 Component() {
  const id = useId()
  return (
    <div className="w-full max-w-64 *:not-first:mt-2">
      <Label htmlFor={id}>Simple input</Label>
      <Input id={id} placeholder="Email" type="email" />
    </div>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { createAnatomy } from "@ark-ui/react/anatomy"
import { type HTMLArkProps, ark } from "@ark-ui/react/factory"

import { cn } from "@/lib/utils"

const anatomy = createAnatomy("label").parts("root")
const parts = anatomy.build()

const Label = React.forwardRef<HTMLLabelElement, HTMLArkProps<"label">>(
  ({ className, htmlFor, children, ...props }, ref) => (
    <ark.label
      ref={ref}
      {...parts.root.attrs}
      htmlFor={htmlFor}
      className={cn(
        "select-none font-medium text-foreground text-sm leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
        className
      )}
      {...props}
    >
      {children}
    </ark.label>
  )
)
Label.displayName = "Label"

export { Label }

Update the import paths to match your project setup.

Usage

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

<Label htmlFor="email">Your email address</Label>

Installation

Usage