Input Wrapper

Wrapper providing consistent styling for input fields in custom layouts.

<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

Slots	label, input, help-text
States	Default, 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

Slot	Description
label	Input label (use <primer-input-label>)
input	Input field content
help-text	Helper text or success messages

---

CSS Properties

Spacing

Property	Description
--primer-space-xsmall	Gap between label and input
--primer-space-medium	Input padding

Border

Property	Description
--primer-radius-small	Border radius
--primer-color-border-outlined-default	Default border
--primer-color-border-outlined-hover	Hover border
--primer-color-border-outlined-focus	Focus border
--primer-color-border-outlined-error	Error border

Background

Property	Description
--primer-color-background-outlined-default	Default background
--primer-color-background-outlined-error	Error background
--primer-color-background-outlined-disabled	Disabled background

---

States

State	Trigger
Default	Initial
Hover	Mouse over
Focus	Input focused
Error	has-error attribute
Disabled	disabled 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

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

Error message placement

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

---

See also

primer-input-label

Label component

primer-card-form

Card form container