Label

Renders an accessible caption for a form control, with color token support.

Usage

label-demo.tsx

import { Label } from 'trivela-ui';

export function Example() {
  return <Label htmlFor="email">Email</Label>;
}

Match htmlFor to the input id so clicking the label focuses the field.

The required prop adds a marker. It is decorative — pair it with required on the input itself, which is what screen readers announce.

Full name

The color token sets the label text color, useful for signalling validation state.

NeutralPrimarySecondarySuccessWarningDangerInfo

Pair a danger label with a danger input to mark a field that failed validation.

Password

Must be at least 8 characters.

Lay the label beside a checkbox so the whole caption becomes a click target.

Accept terms and conditions

Prop	Type	Default	Description
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale applied to the label text.
required	boolean	false	Appends a decorative asterisk. Hidden from assistive tech — set required on the control instead.
htmlFor	string	—	Id of the control this label captions.
className	string	—	Merged with the generated variant classes via cn().
...props	LabelHTMLAttributes<HTMLLabelElement>	—	All native label attributes are forwarded to the root element.