Label

A Radix Label.Root — a <label> that stays associated with its control even when that control is a styled non-native element (like Checkbox, which renders a <button>).

import { Label } from "@pompeitech/vesuvius-ui";

Default

With a required marker

There's no required prop — add the asterisk (or any other marker) yourself as part of the children, styled however your form needs:

Disabled state

Radix's Label automatically dims and disables text-selection when its associated control carries data-disabled or sits inside a <fieldset disabled> — no prop to set on the label itself:

API

Label

Every native <label> prop, most importantly:

No custom props of its own beyond the styling hooks — its value over a bare <label className="..."> is that clicking/selecting text inside it is correctly suppressed when the associated control is disabled, which a plain native label does not do automatically for non-native controls like Checkbox.

Accessibility

Prefer htmlFor/id association (as in every example above) over wrapping the control as a child — an explicit id match is what lets assistive technology announce the label even when the control isn't a direct DOM descendant.