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.
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
<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
<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
- 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 |
| Do | Don’t |
|---|
| No trailing punctuation | ”Card number:” (no colon needed) |
| Mark optional fields: “Company (optional)“ | Mark required fields with asterisks |
See also
primer-input-wrapper
Parent wrapper
primer-card-form
Card form container
