Input
Single-line text field with label, optional required marker, hint and error message.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
We’ll never share your email.
<div class="px-field">
<label class="px-label" for="in-email">Email<span class="px-label__req" aria-hidden="true">*</span></label>
<div class="px-input">
<svg class="px-icon" aria-hidden="true">…</svg>
<input id="in-email" type="email" placeholder="olivia@pixels.io" aria-describedby="in-email-hint" required>
</div>
<p class="px-hint" id="in-email-hint">We’ll never share your email.</p>
</div>Usage
- Always show a visible label; placeholders are examples, not labels.
- Put the hint under the field and replace it with the error when invalid.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Sizes
Height comes from --px-input-height-sm/md/lg.
<div class="stack">
<div class="px-input px-input--sm"><input aria-label="Small" placeholder="Small · 32px"></div>
<div class="px-input"><input aria-label="Medium" placeholder="Medium · 40px"></div>
<div class="px-input px-input--lg"><input aria-label="Large" placeholder="Large · 48px"></div>
</div>Error
Add px-field--error, aria-invalid and point aria-describedby at the message.
Enter your full name.
<div class="px-field px-field--error">
<label class="px-label" for="in-name">Full name</label>
<div class="px-input">
<input id="in-name" value="O" aria-invalid="true" aria-describedby="in-name-err">
<svg class="px-icon" aria-hidden="true">…</svg>
</div>
<p class="px-hint px-hint--error" id="in-name-err">Enter your full name.</p>
</div>Leading text and trailing icon
Add-ons for units, protocols or currency.
https://
<div class="px-field">
<label class="px-label" for="in-site">Website</label>
<div class="px-input">
<span class="px-input__addon">https://</span>
<input id="in-site" placeholder="pixelsds.com">
<svg class="px-icon" aria-hidden="true">…</svg>
</div>
</div>Disabled
<div class="px-field">
<label class="px-label" for="in-dis">Workspace ID</label>
<div class="px-input"><input id="in-dis" value="px-29381" disabled></div>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-field | class | Wraps label, input and hint. Max width --px-input-width. |
px-field--error | class | Error state (Figma State = Error). |
px-input | class | Field box. Put the <input> and icons inside. |
px-input--sm · --lg | class | Size. |
px-label · px-label__req | class | Label and required marker. |
px-hint · px-hint--error | class | Hint and error message. |
px-input__addon | class | Leading text add-on. |
Figma properties
Input36 variants · page “Input Fields”Open
Single-line text field with label, optional required marker, hint and error message. Field height comes from --px-input-height-*; RTL variants mirror icon positions and use the Arabic locale mode. RTL…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Full name” |
| Hint | Text | “This is the name on your account.” |
| Show label | Boolean | — |
| Show hint | Boolean | — |
| Required | Boolean | — |
| Leading icon | Boolean | — |
| Leading icon swap | Instance swap | — |
| Trailing icon | Boolean | — |
| Error message | Text | “Enter your full name.” |
| Size | Variant | Small Medium Large |
| State | Variant | Active Hover Focused Filled Disabled Error |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-input-content-placeholder | color-content-neutral-placeholder | #667085 |
--px-input-content-label | color-content-neutral-secondary | #475467 |
--px-input-content-hint | color-content-neutral-tertiary | #667085 |
--px-input-content-error | color-content-danger-default | #b42318 |
--px-input-radius | radius-12 | 12px |
--px-input-height-md | spacing-40 | 40px |
--px-input-padding-x | spacing-12 | 12px |
--px-input-height-sm | spacing-36 | 36px |
--px-input-height-lg | control-height-lg | 48px |
--px-input-gap | spacing-8 | 8px |
--px-input-field-gap | spacing-8 | 8px |
--px-input-width | 320px | 320px |
--px-input-focus-halo | #2563eb2e | #2563eb2e |
Accessibility
- Connect label with for/id.
- Link hint/error with aria-describedby; set aria-invalid on error.
- Required: use the required attribute; the * is aria-hidden.