> ## 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="/sdk/primer-checkout-web/components/primer-card-form/primer-input-wrapper">
    Parent wrapper
  </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>