Aura Design System

Label

Renders an accessible label associated with form controls.

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/label

Manual

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Label component into your components/ui/Label.tsx file.

/**
 * @description Renders an accessible label associated with form controls.
 */
import * as React from "react";

import { cn } from "@/utils/class-names";

function Label({ className, ...props }: React.ComponentProps<"label">) {
  return <label data-slot="input" className={cn(className)} {...props} />;
}

export { Label };

On this page