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	string	"left"	left, center, right	Horizontal alignment of the label block.
size	string	"m"	s, m, l	Label typography: s / 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-only supplement when non-empty. HTML attribute: required-screen-reader-text.
requiredMarker	string	"*"	—	Visual marker when required. HTML attribute: required-marker.
optional	boolean	false	true, false	When true and not required, shows the optional hint.
optionalText	string	""	—	Overrides the default optional hint (locale("fieldLabel.optional")). HTML attribute: 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	object	See Test Selectors	—	Override data-test attributes for testing.

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.