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

# Card Number Input

> Secure input for card numbers with automatic network detection.

## \<primer-input-card-number>

Secure, PCI-compliant input for card numbers. Automatically detects and displays card network (Visa, Mastercard, etc.) as user types.

## Quick Reference

|                |                                      |
| -------------- | ------------------------------------ |
| **Parent**     | `<primer-card-form>`                 |
| **Properties** | `label`, `placeholder`, `aria-label` |
| **Features**   | Network detection, auto-formatting   |

***

## Examples

### Default

```html theme={"dark"}
<primer-card-form>
  <primer-input-card-number></primer-input-card-number>
</primer-card-form>
```

### Custom Labels

```html theme={"dark"}
<primer-input-card-number
  label="Credit Card Number"
  placeholder="Enter your card number"
  aria-label="Your credit card number"
></primer-input-card-number>
```

### No Placeholder

```html theme={"dark"}
<primer-input-card-number placeholder=""></primer-input-card-number>
```

### In Custom Layout

```html theme={"dark"}
<primer-card-form>
  <div slot="card-form-content">
    <primer-input-card-number></primer-input-card-number>
    <div style="display: flex; gap: 8px;">
      <primer-input-card-expiry></primer-input-card-expiry>
      <primer-input-cvv></primer-input-cvv>
    </div>
    <button type="submit">Pay</button>
  </div>
</primer-card-form>
```

***

## Properties

| Property      | Attribute     | Type     | Default                 | Description         |
| ------------- | ------------- | -------- | ----------------------- | ------------------- |
| `label`       | `label`       | `string` | `"Card Number"`         | Label text          |
| `placeholder` | `placeholder` | `string` | `"4111 1111 1111 1111"` | Placeholder text    |
| `ariaLabel`   | `aria-label`  | `string` | Value of `label`        | Screen reader label |

Setting to empty string `""`:

* `label`: Reverts to default
* `placeholder`: Shows no placeholder
* `aria-label`: Uses `label` value

***

## Card Network Detection

Automatically detects:

| Network    | Example Prefix |
| ---------- | -------------- |
| Visa       | 4xxx           |
| Mastercard | 5xxx           |
| Amex       | 34xx, 37xx     |
| Discover   | 6011           |

Displays network logo and adjusts formatting (e.g., Amex uses different spacing).

***

## Validation

Validates:

* Number length matches detected network (e.g., 16 for Visa, 15 for Amex)
* At least one digit entered

Errors display automatically on submit or blur.

***

## Events

`<primer-input-card-number>` does not emit its own events. Validation and submission are managed by the parent `<primer-card-form>`.

### Relevant Parent Events

| Event                 | Emitted by                                       | How it affects this input                                                             |
| --------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------- |
| `primer:card-submit`  | `<primer-card-form-submit>` or external dispatch | Triggers validation — if this input is invalid, an error message displays below it    |
| `primer:card-error`   | `<primer-card-form>`                             | Emitted when any card input fails validation — payload includes all validation errors |
| `primer:card-success` | `<primer-card-form>`                             | Emitted when the form submits successfully                                            |

### Reacting to card validation errors

```javascript theme={"dark"}
const cardForm = document.querySelector('primer-card-form');

cardForm.addEventListener('primer:card-error', (event) => {
  const { errors } = event.detail;
  errors.forEach(err => console.log(err.field, err.message));
});
```

***

## CSS Properties

This component uses the shared [Input Styling Tokens](/sdk/primer-checkout-web/styling-variables#input-styling-tokens).

### Layout

| Property               | Description                        | Default |
| ---------------------- | ---------------------------------- | ------- |
| `--primer-space-small` | Gap between input and network icon | `8px`   |

### Typography

| Property                                | Description       | Default |
| --------------------------------------- | ----------------- | ------- |
| `--primer-typography-body-large-size`   | Input text size   | `16px`  |
| `--primer-typography-body-large-weight` | Input text weight | `400`   |
| `--primer-typography-body-small-size`   | Label text size   | `12px`  |

### Colors

| Property                          | Description            |
| --------------------------------- | ---------------------- |
| `--primer-color-text-primary`     | Input text color       |
| `--primer-color-text-placeholder` | Placeholder text color |
| `--primer-color-text-disabled`    | Disabled text color    |
| `--primer-color-text-negative`    | Error message color    |

### Border & Background

| Property                                     | Description         |
| -------------------------------------------- | ------------------- |
| `--primer-radius-small`                      | Input border radius |
| `--primer-color-border-outlined-default`     | Default border      |
| `--primer-color-border-outlined-focus`       | Focus border        |
| `--primer-color-border-outlined-error`       | Error border        |
| `--primer-color-background-outlined-default` | Default background  |

### Animation

| Property                      | Description         | Default                         |
| ----------------------------- | ------------------- | ------------------------------- |
| `--primer-animation-duration` | Transition duration | `200ms`                         |
| `--primer-animation-easing`   | Transition easing   | `cubic-bezier(0.44, 0, 0.4, 1)` |

***

## States

| State        | Description                        | Visual Change                   |
| ------------ | ---------------------------------- | ------------------------------- |
| **Default**  | Initial state                      | Standard border and background  |
| **Hover**    | Mouse over input                   | Border darkens slightly         |
| **Focus**    | Input is focused                   | Blue border, increased width    |
| **Filled**   | Valid card number entered          | Network icon displayed          |
| **Error**    | Invalid input or validation failed | Red border, error message below |
| **Disabled** | Form or input disabled             | Muted colors, no interaction    |

***

## Usage Guidelines

### Do

* Place inside `<primer-card-form>`
* Use for card number collection only

### Don't

* Don't use `<primer-card-network-selector>` separately (internal component)
* Don't place outside card form context

***

## Content Guidelines

### Label

| Do                | Don't                                           |
| ----------------- | ----------------------------------------------- |
| "Card number"     | "Credit card number" (not all cards are credit) |
| Use sentence case | "CARD NUMBER"                                   |

### Placeholder

| Do                                        | Don't                                           |
| ----------------------------------------- | ----------------------------------------------- |
| `1234 1234 1234 1234` (formatted example) | "Enter your card number" (redundant with label) |
| Empty placeholder (clean look)            | A partial number like `4111`                    |

### Error messages

| Do                          | Don't            |
| --------------------------- | ---------------- |
| "Enter a valid card number" | "Invalid"        |
| "Card number is incomplete" | "Error in field" |

***

## See also

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

  <Card title="primer-input-card-expiry" icon="cube" href="/sdk/primer-checkout-web/components/primer-card-form/primer-input-card-expiry">
    Expiry input
  </Card>

  <Card title="primer-input-cvv" icon="cube" href="/sdk/primer-checkout-web/components/primer-card-form/primer-input-cvv">
    CVV input
  </Card>
</CardGroup>