Label

1// Base UI base label — a plain host `<label>`.
2//
3// NOT `Field.Label`, and that is the whole point of this file. Base UI's label part is
4// `Field.Label`, but it calls `useFieldRootContext(false)` — it HARD-REQUIRES a `<Field.Root>`
5// ancestor and throws "FieldRootContext is missing" without one. Upstream's own FieldLabel does
6// the same, so that is faithful behavior, not a porting defect.
7//
8// shadcn's `Label`, by contrast, is a standalone component: the docs use it beside an Input with
9// no Field wrapper at all, which is exactly how the playground uses it. Routing it through
10// `Field.Label` made every such use a runtime crash. A plain `<label>` works standalone AND
11// inside a Field, and consumers who want Base UI's automatic label/control association can reach
12// for `Field.Label` directly.
13//
14// Regression coverage: `tests/base-ui-standalone.test.ts`.
15//
16// UNVERIFIED PROVENANCE: the class string is taken from this package's React Aria base rather
17// than transcribed from upstream's Base UI source. It carries one utility the Radix base omits
18// (`peer-data-disabled:opacity-50`).
19import { cn } from '@/lib/utils';
20import type { HostProps } from '@/lib/types';
21 
22export function Label({ className, ...props }: HostProps<'label'>) @{
23	<label
24		data-slot="label"
25		className={cn(
26			'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:opacity-50',
27			className,
28		)}
29		{...props}
30	/>
31}