Label

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
5  ref?: React.Ref<HTMLLabelElement>;
6  required?: boolean;
7  optional?: boolean;
8  description?: string;
9  descriptionId?: string;
10};
11
12function Label({
13  className,
14  required,
15  optional,
16  description,
17  descriptionId,
18  children,
19  ref,
20  ...props
21}: LabelProps) {
22  const label = (
23    <label
24      ref={ref}
25      data-slot="label"
26      className={cn(
27        '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-40 peer-disabled:cursor-not-allowed peer-disabled:opacity-40',
28        className,
29      )}
30      {...props}
31    >
32      {children}
33      {required && (
34        <span aria-hidden="true" className="text-destructive-text text-sm">
35          *
36        </span>
37      )}
38      {optional && <span className="text-muted-foreground text-xs font-normal">(optional)</span>}
39    </label>
40  );
41
42  if (!description) return label;
43
44  const hintId =
45    descriptionId ?? (props.htmlFor ? `${props.htmlFor}-label-description` : undefined);
46
47  return (
48    <div className="flex flex-col gap-1">
49      {label}
50      <span id={hintId} data-slot="label-description" className="text-muted-foreground text-xs">
51        {description}
52      </span>
53    </div>
54  );
55}
56
57Label.displayName = 'Label';
58
59export { Label };
60export type { LabelProps };