Skip to Content

Label

Accessible label via Radix Label with SumX typography (text-xs font-medium).

Interactive demo

With input

<Label htmlFor="email">Work email</Label>
<Input id="email" type="email" value={email} onChange={...} />

Standalone labels

Import

import { Label } from '@sumx/ui';

Usage

<Label htmlFor="crop-width">Width (px)</Label> <Input id="crop-width" type="number" />

Props

React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> — standard Radix label props including htmlFor.

Styling

Default: mb-1 text-xs font-medium leading-none + peer-disabled states.