Label

import { Label } from '@/components/label';

export default function LabelPreview() {
  return <Label>Label</Label>;
}

Source Code

'use client';

import { useId } from 'react';

import { cn } from '@/lib/utils/classnames';

const Label = ({
  children,
  className,
  ...props
}: React.ComponentPropsWithRef<'label'>) => {
  const generatedId = useId();
  const id = props.id ?? generatedId;

  return (
    <label
      className={cn('font-medium text-base text-foreground', className)}
      id={id}
      {...props}
    >
      {children}
    </label>
  );
};

export { Label };

API Reference

Extends the label element.

Examples

Simple

Basic usage with an input field.

import { Label } from '@/components/label';

export default function LabelPreview() {
  return <Label>Label</Label>;
}

Best Practices

1. Association:

   • Always associate labels with form controls
   • Use htmlFor to link with input IDs
   • Ensure labels are clickable

2. Content:

   • Keep labels concise and clear
   • Use sentence case
   • Include required field indicators when needed

3. Accessibility:

   • Never hide labels visually
   • Maintain sufficient text contrast
   • Consider label position relative to inputs