Input Label

​

<primer-input-label>

​

Quick Reference

​

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

​

CSS Properties

​

States

​

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

​

Formatting

​

See also