Field Label

A field label associates visible copy with a form control. Use catnip-field-label when Catnip does not own the control — for example a native <select>, a third-party widget, or a custom layout — and you want the same label row as Input, Date Input, Number Input, Phone Input, and Chip Input.

Overview

catnip-field-label renders a native <label> with optional required marker, optional hint, info tooltip, and trailing action / suffix slots.

When to use

• Custom controls — pair with any element that accepts an id and can be referenced from html-for.
• Composite inputs — prefer label / label slot props on catnip-input, catnip-input-date, catnip-input-number, catnip-input-phone, and catnip-input-chip when Catnip owns the field; those components embed the same label primitive and wire for / id for you.

Layout

• Default spacing — the root includes bottom margin (label→control gap) unless flush is set.
• Alignment — left (default), center, or right for the label block.
• Size — s, m, or l typography matching field sizes.

Live example

Accessibility

• Set html-for on the label and a matching id on the associated control.
• When required is true, set required and/or aria-required="true" on the control — the label marker is visual only.
• When disabled is set on the label for visual coordination, also set native disabled on the control.
• Optional required-screen-reader-text adds a supplemental hidden phrase only when non-empty; it does not replace aria-required on the control.

See Guidelines for slot patterns and Specs for the full prop reference.