Vela UI Docs
venizia.ai

Label

An accessible label associated with a form control.

npx shadcn@latest add @velaui/label
npx shadcn@latest add @velaui/label

Examples

  • Default
  • With input

View code

Label · Default

Installation

pnpm dlx velaui add @velaui/label
pnpm dlx velaui add @velaui/label

Code

label-default.tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept the terms of service</Label>
    </div>
  );
}

View code

Label · With input

Installation

pnpm dlx velaui add @velaui/label
pnpm dlx velaui add @velaui/label

Code

label-with-input.tsx
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Example() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="workspace">Workspace name</Label>
      <Input id="workspace" placeholder="Linden Supply Co." />
    </div>
  );
}

Usage

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

export default function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept the terms of service</Label>
    </div>
  );
}

Props

Takes every prop of LabelProps.

Dependencies

npm
radix-ui@1.6.0
Installs with it
nothing else
npm
none besides React
Installs with it
nothing else

Source

components/ui/label.tsx
import * as React from "react"
import { Label as LabelPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

export type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root>;

function Label({
  className,
  ...props
}: LabelProps) {
  return (
    <LabelPrimitive.Root
      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}
    />
  )
}

export { Label }
components/ui/label.tsx
import * as React from "react"

import { cn } from "@/lib/utils"

export type LabelProps = React.ComponentProps<"label">;

function Label({
  className,
  ...props
}: LabelProps) {
  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 }