Label

The label for a control: 14px medium, dimmed along with a disabled control.

shadcn's base-nova label: 14px medium, dimmed when the control beside it or the field around it is disabled — a kit checkbox, radio or switch says so with data-disabled, which the label answers as well as :disabled. Point htmlFor at the control's id.

Install

npx shadcn@latest add @vibra/label

Needs the @vibra registry in your components.json — set it up once.

Examples

Share this dashboard with the whole workspace

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

export default function LabelDemo() {
  return (
    <div className="flex items-center gap-3">
      <Checkbox id="share-dashboard" />
      <Label htmlFor="share-dashboard">Share this dashboard with the whole workspace</Label>
    </div>
  )
}

Dependencies

Registry

theme-vibra

Source

components/ui/label.tsx

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

function Label({ className, ...props }: React.ComponentProps<"label">) {
  return (
    <label
      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 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }