Skip to main content

​
<primer-input-label>

Provides consistent label styling for input fields. Used internally by card inputs and available for custom fields.

​
Quick Reference

Parent<primer-input-wrapper>
Propertiesdisabled
Slotlabel (in wrapper)

​
Examples

​
With Input Wrapper

<primer-input-wrapper>
  <primer-input-label slot="label">Discount Code</primer-input-label>
  <div slot="input">
    <input type="text" id="discount">
  </div>
</primer-input-wrapper>

​
Disabled

<primer-input-label disabled>Discount Code</primer-input-label>

​
Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseApplies disabled styling

​
CSS Properties

PropertyDescription
--primer-typography-body-small-fontFont family
--primer-typography-body-small-sizeFont size
--primer-typography-body-small-weightFont weight
--primer-color-text-primaryDefault color
--primer-color-text-disabledDisabled color

​
States

StateDescriptionVisual Change
DefaultNormal statePrimary text color
Disableddisabled attribute setMuted text color

​
Usage Guidelines

​
Do

  • Use inside <primer-input-wrapper> in the label slot for consistent styling
  • Match the disabled state to the corresponding input
  • Use a <label> element with a for attribute when wrapping native inputs for accessibility

​
Don’t

  • Don’t use outside of the wrapper context unless you need standalone label styling
  • Don’t duplicate labels — one label per input

​
Content Guidelines

​
Label text

DoDon’t
”Discount code""DISCOUNT CODE”
Use sentence caseUse title case or all caps

​
Formatting

DoDon’t
No trailing punctuation”Card number:” (no colon needed)
Mark optional fields: “Company (optional)“Mark required fields with asterisks