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

<CardGroup cols={2}>
  <Card title="primer-input-label" icon="cube" href="/sdk/primer-checkout-web/components/primer-card-form/primer-input-label">
    Label component
  </Card>

  <Card title="primer-card-form" icon="credit-card" href="/sdk/primer-checkout-web/components/primer-card-form/primer-card-form">
    Card form container
  </Card>
</CardGroup>