Docs
Label

Label

Renders an accessible label associated with controls.

DocsAPI ReferenceSource

Installation

Install the following dependencies:

npm install @radix-ui/react-label class-variance-authority

Copy and paste the following code into your project.

'use client';
 
import * as LabelPrimitive from '@radix-ui/react-label';
import { cva, type VariantProps } from 'class-variance-authority';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
 
const labelVariants = cva(styles.base);
 
const Label = forwardRef<
    ElementRef<typeof LabelPrimitive.Root>,
    ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
    <LabelPrimitive.Root ref={ref} className={clsx(labelVariants(), className)} {...props} />
));
Label.displayName = LabelPrimitive.Root.displayName;
 
export { Label };

Update the import paths to match your project setup.

Usage

import { Label } from '@/components/ui/label';
<Label htmlFor='email'>Your email address</Label>