Component

Label

A field’s label, dimmed with its disabled peer.

stablev0.2.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/label

Examples

Default

Open alone

API

<Label />Takes the props of what it wraps

A field's label. Dims with a disabled peer field or group.

Dependencies

npm

  • @radix-ui/react-label@^2.1.1

Registry

  • @fastrp/utils

Source

components/ds/label.tsxShow
'use client';

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

// @fast-ds [email protected]

/** A field's label. Dims with a disabled peer field or group. */
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex select-none items-center gap-2 font-display text-label uppercase leading-none text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
        className,
      )}
      {...props}
    />
  );
}

export { Label };