Skip to main content

​
<primer-input-wrapper>

Provides consistent styling and structure for input fields. Used internally by card inputs and available for custom fields to match Primer’s visual style.

​
Quick Reference

Slotslabel, input, help-text
StatesDefault, focus, hover, error, disabled

​
Examples

​
Basic Custom Field

<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>

​
With Card Form

<primer-card-form>
  <div slot="card-form-content">
    <primer-input-card-number></primer-input-card-number>
    <primer-input-card-expiry></primer-input-card-expiry>
    <primer-input-cvv></primer-input-cvv>
    
    <!-- Custom field matching card input style -->
    <primer-input-wrapper>
      <primer-input-label slot="label">Promo Code</primer-input-label>
      <div slot="input">
        <input type="text" id="promo">
      </div>
    </primer-input-wrapper>
    
    <button type="submit">Pay</button>
  </div>
</primer-card-form>

​
Error State

<primer-input-wrapper has-error>
  <primer-input-label slot="label">Email</primer-input-label>
  <div slot="input">
    <input type="email" id="email">
  </div>
</primer-input-wrapper>

​
Slots

SlotDescription
labelInput label (use <primer-input-label>)
inputInput field content
help-textHelper text or success messages

​
CSS Properties

​
Spacing

PropertyDescription
--primer-space-xsmallGap between label and input
--primer-space-mediumInput padding

​
Border

PropertyDescription
--primer-radius-smallBorder radius
--primer-color-border-outlined-defaultDefault border
--primer-color-border-outlined-hoverHover border
--primer-color-border-outlined-focusFocus border
--primer-color-border-outlined-errorError border

​
Background

PropertyDescription
--primer-color-background-outlined-defaultDefault background
--primer-color-background-outlined-errorError background
--primer-color-background-outlined-disabledDisabled background

​
States

StateTrigger
DefaultInitial
HoverMouse over
FocusInput focused
Errorhas-error attribute
Disableddisabled attribute

​
Usage Guidelines

​
Do

  • Use for custom fields that should match card input styling
  • Apply has-error attribute for validation errors

​
Don’t

  • Don’t use for card inputs (they handle their own wrappers)

​
Content Guidelines

​
help-text slot

DoDon’t
”3 digits on the back of your card""See card” (too terse)
Keep to one short sentenceWrite a paragraph of instructions

​
Error message placement

DoDon’t
Place error text in the help-text slot when has-error is setPlace errors outside the wrapper (breaks visual grouping)
Keep messages specific: “Enter a valid code”Use generic messages: “Invalid input”