Field Label

When to use standalone vs composite inputs

• Use catnip-field-label when the control is not a Catnip input — native elements, third-party widgets, file uploads, grouped custom layouts.
• Use composite label 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 and wire html-for / id automatically.

Wiring

<catnip-field-label html-for="country" required>
  Country
</catnip-field-label>
<select id="country" required aria-required="true">…</select>

• html-for on the label must match the control id.
• required on the label is visual only — set required and/or aria-required="true" on the control.
• disabled on the label coordinates appearance only — set native disabled on the control.

Slots

• action — end-aligned link or button (e.g. “Don’t know address?”). Project with slot="action" on a child such as catnip-link.
• suffix — custom trailing content when you are not using the info prop. When info is non-empty, it wins and suffix is omitted.

Composite inputs use label.action and label.suffix for the same patterns.

Info tooltip

Pass a plain string to info to render the default info tooltip beside the title. For a custom anchor or tooltip body, leave info empty and use the suffix slot with catnip-tooltip.

Spacing

• Default — label includes bottom margin to the control.
• flush — use when a parent wrapper already defines vertical rhythm (flex gap, stacked fields).

Helper / error copy

Standalone labels do not include supporting text. For Catnip-owned fields, use supporting-text on catnip-input, catnip-input-date, catnip-input-number, catnip-input-phone, or catnip-input-chip. For custom controls, use your own helper markup below the field until a public supporting-text primitive is available.