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

> Label component with consistent typography for input fields.

## \<primer-input-label>

Provides consistent label styling for input fields. Used internally by card inputs and available for custom fields.

## Quick Reference

| | |
| - | - |
| **Parent** | `<primer-input-wrapper>` |
| **Properties** | `disabled` |
| **Slot** | `label` (in wrapper) |

***

## Examples

### With Input Wrapper

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

### Disabled

```html theme={"dark"}
<primer-input-label disabled>Discount Code</primer-input-label>
```

***

## Properties

| Property | Attribute | Type | Default | Description |
| - | - | - | - | - |
| `disabled` | `disabled` | `boolean` | `false` | Applies disabled styling |

***

## CSS Properties

| Property | Description |
| - | - |
| `--primer-typography-body-small-font` | Font family |
| `--primer-typography-body-small-size` | Font size |
| `--primer-typography-body-small-weight` | Font weight |
| `--primer-color-text-primary` | Default color |
| `--primer-color-text-disabled` | Disabled color |

***

## States

| State | Description | Visual Change |
| - | - | - |
| **Default** | Normal state | Primary text color |
| **Disabled** | `disabled` attribute set | Muted text color |

***

## Usage Guidelines

### Do

* Use inside `<primer-input-wrapper>` in the `label` slot for consistent styling
* Match the `disabled` state to the corresponding input
* Use a `<label>` element with a `for` attribute when wrapping native inputs for accessibility

### Don't

* Don't use outside of the wrapper context unless you need standalone label styling
* Don't duplicate labels — one label per input

***

## Content Guidelines

### Label text

| Do | Don't |
| - | - |
| "Discount code" | "DISCOUNT CODE" |
| Use sentence case | Use title case or all caps |

### Formatting

| Do | Don't |
| - | - |
| No trailing punctuation | "Card number:" (no colon needed) |
| Mark optional fields: "Company (optional)" | Mark required fields with asterisks |

***

## See also

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

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


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