> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```html theme={"dark"}
<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

```html theme={"dark"}
<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

```html theme={"dark"}
<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

> [card] [primer-input-label](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-label.md)
>
> Label component

> [card] [primer-card-form](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-card-form.md)
>
> Card form container


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.