Label

React form

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://react.uipkge.dev/r/react/label.json

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

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

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

Or with the named registry: npx shadcn@latest add @uipkge-react/label

Examples

Dependencies

@radix-ui/react-label

Used by

auth-password-reset auth-sign-in auth-sign-up checkout-flow contact-01 contact-us data-table form kanban-board login-01 login-02 payment-form register-01 sidebar-03 textarea

Files (2)

components/ui/label/Label.tsx 0.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 }

components/ui/label/index.ts 0 kB
```
export { Label } from './Label'
```

Raw manifest: https://react.uipkge.dev/r/react/label.json