Components

Label

A form label. Use it to label form inputs for accessibility.

example.tsx

Label

Import

tsx

import { AppLabel } from "@/components/primitives/AppLabel"

Usage

Use the Label component with input components for proper accessibility. The htmlFor prop links the label to the input.

tsx

import { AppInput } from "@/components/primitives/AppInput"
import { AppLabel } from "@/components/primitives/AppLabel"

export function FormExample() {
  return (
    <div className="space-y-2">
      <AppLabel htmlFor="email">Email</AppLabel>
      <AppInput id="email" placeholder="Enter your email" />
    </div>
  )
}

API Reference

AppLabel extends all native <label> HTML attributes.

Prop	Type	Description
htmlFor	string	The id of the form element the label is associated with.
className	string	Additional Tailwind classes merged via cn().

Source

src/components/primitives/AppLabel.tsx

"use client"

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

function AppLabel(props: React.ComponentProps<typeof Label>) {
  return <Label {...props} />
}

export { AppLabel }