Input

Single-line text input with built-in label, hint, error, and loading state.

Preview · Input

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:380px">
  <label>Email <input type="email" placeholder="name@company.com" /></label>
  <div data-field>
    <label>API Key <input type="text" placeholder="sk-..." /></label>
    <span data-hint>Visible only once after generation.</span>
  </div>
  <div data-field="error">
    <label>Password <input type="password" aria-invalid="true" /></label>
    <span class="error">Must be at least 8 characters.</span>
  </div>
</div>

React

import { PrimusInput } from 'primus-react-ui';

<PrimusInput label="Email" placeholder="name@company.com" />
<PrimusInput label="API Key" hint="Visible only once." />
<PrimusInput label="Password" error="Must be at least 8 characters." />
<PrimusInput label="Loading" loading />

Angular

<primus-input label="Email" placeholder="name@company.com"></primus-input>
<primus-input label="API Key" hint="Visible only once."></primus-input>
<primus-input label="Password" error="Must be at least 8 characters."></primus-input>
<primus-input label="Loading" [loading]="true"></primus-input>

Props

Prop	Type	Default	Description
label	string	—	Label text
error	string	—	Error message
hint	string	—	Helper text
loading	boolean	false	Loading state
disabled	boolean	false	Disabled

Accessibility

• Label is always required — every input must have an associated <label>
• Error state sets aria-invalid="true" and links the error message via aria-describedby automatically
• Focus ring uses --ring token, meets WCAG 2.1 AA contrast on all backgrounds
• required prop adds aria-required="true" and a visible * marker

Version history

See the Changelog for version history and breaking changes.