Form Field

Combines label, input, hint, and error into a consistent field layout.

Preview · Form Field

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:320px">
  <div data-field>
    <label for="company">Company name</label>
    <input id="company" type="text" placeholder="Acme Corp" />
    <span data-hint>Used for tenant identification.</span>
  </div>
  <div data-field="error">
    <label for="email2">Email</label>
    <input id="email2" type="email" aria-invalid="true" />
    <span class="error">Please enter a valid email.</span>
  </div>
</div>

React

import { PrimusField, Label, PrimusInput } from 'primus-react-ui';

<PrimusField hint="Used for tenant identification.">
  <Label>Company name</Label>
  <PrimusInput placeholder="Acme Corp" />
</PrimusField>
<PrimusField error="Please enter a valid email.">
  <Label>Email</Label>
  <PrimusInput type="email" />
</PrimusField>

Angular

<primus-form-field label="Company name" hint="Used for tenant identification.">
  <primus-input placeholder="Acme Corp"></primus-input>
</primus-form-field>
<primus-form-field label="Email" error="Please enter a valid email.">
  <primus-input type="email"></primus-input>
</primus-form-field>

Props

Prop	Type	Default	Description
label	string	—	Field label
hint	string	—	Helper text
error	string	—	Error message
required	boolean	false	Required indicator

Accessibility

• PrimusField / primus-form-field renders a <div data-field> wrapper with correct for/id associations
• Error text is wrapped in role="alert" so it is announced immediately when it appears
• Hint text uses data-hint — linked to the input via aria-describedby
• Required fields get aria-required="true" automatically when required prop is set

Version history

See the Changelog for version history and breaking changes.