Label

labelui

Accessible label primitive — wraps text and binds to its child input via `htmlFor`. Disabled-state styling and proper screen-reader behavior.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/label.json

$npx shadcn@latest add https://uipkge.dev/r/react/label.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/label.json

$bunx shadcn@latest add https://uipkge.dev/r/react/label.json

Named registry:npx shadcn@latest add @uipkge-react/labelInstalls to:components/ui/label/

Examples

Loading interactive previews…

npm dependencies

@radix-ui/react-label

Files installed (2)

components/ui/label/Label.tsx0.7 kB

'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cn } from '@/lib/utils'

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="label"
    className={cn(
      'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
      className,
    )}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }