Field Label

Props

Prop	Type	Default	Options	Description
htmlFor	string	""	—	Associates the label with a control (for attribute). HTML attribute: html-for.
id	string	""	—	Optional id on the root <label>.
alignment	"left" | "center" | "right"	"left"	left, center, right	Horizontal alignment of the field label block.
size	"m" | "l"	"m"	m, l	Label typography: m → text-m medium; l → text-l medium.
required	boolean	false	true, false	Shows the visual required marker. Pair with required on the control.
requiredScreenReaderText	string	""	—	Optional screen-reader supplement; it does not replace required on the control (HTML: required-screen-reader-text).
requiredMarker	string	"*"	—	Visual marker for required fields (HTML: required-marker).
optional	boolean	false	true, false	When true and not required, shows the localized optional hint.
optionalText	string	""	—	Overrides the localized optional hint (HTML: optional-text).
disabled	boolean	false	true, false	Mutes the label visually when the control is disabled.
flush	boolean	false	true, false	Removes default bottom margin so the parent supplies vertical spacing.
info	string	""	—	When non-empty, renders a trailing catnip-tooltip. Wins over the suffix slot.
testSelectors	TestSelectorsProp	See Test Selectors	—	Overrides stable data-test values.

See Component API — Props.

Slots

Name	Description
(default)	Visible label title text.
action	End-aligned action on the label row (e.g. catnip-link).
suffix	Trailing content beside the title (e.g. custom tooltip anchor). Omitted when info is non-empty.

On composite inputs (catnip-input, etc.), the same patterns use prefixed slot names: label, label.action, label.suffix.

See Component API — Slots.

Events

This component has no events.

See Component API — Events.

Test Selectors

Attribute	Default Value
root	catnip-field-label
main	catnip-field-label-main
optional	catnip-field-label-optional
required	catnip-field-label-required
suffix	catnip-field-label-suffix
action	catnip-field-label-action

See Component API — Test selectors.