Input Group

Attach a prefix label, suffix label, or action button directly to an input field. Uses <fieldset class="group"> from @primus/ui-core.

Preview · Input Group

Code

HTML · @primus/ui-core

<!-- URL prefix -->
<fieldset class="group">
  <legend>https://</legend>
  <input type="text" placeholder="acme.yourdomain.com" />
</fieldset>

<!-- Currency prefix + suffix -->
<fieldset class="group">
  <legend>$</legend>
  <input type="number" placeholder="0.00" />
  <legend>USD</legend>
</fieldset>

<!-- Input + action button -->
<fieldset class="group">
  <input type="search" placeholder="Search tenants..." />
  <button class="small">Search</button>
</fieldset>

<!-- Read-only value with copy button -->
<fieldset class="group">
  <input type="text" value="sk_live_abc123xyz789" readonly
    style="font-family:monospace;font-size:0.8rem" />
  <button class="outline small"
    onclick="navigator.clipboard.writeText(this.previousElementSibling.value)">
    Copy
  </button>
</fieldset>

React

// Option A: Use PrimusInputGroup component
import { PrimusInputGroup } from 'primus-react-ui';

<PrimusInputGroup prefix="https://">
  <input type="text" placeholder="acme.yourdomain.com" />
</PrimusInputGroup>

<PrimusInputGroup prefix="$" suffix="USD">
  <input type="number" placeholder="0.00" />
</PrimusInputGroup>

// Option B: Use @primus/ui-core HTML directly
<fieldset className="group">
  <legend>https://</legend>
  <input type="text" placeholder="acme.yourdomain.com" />
</fieldset>

// API key with copy
function ApiKeyField({ value }) {
  const copy = () => navigator.clipboard.writeText(value);
  return (
    <div>
      <label style={{ display: 'block', marginBottom: 6, fontWeight: 500 }}>
        API key
      </label>
      <fieldset className="group">
        <input type="text" value={value} readOnly
          style={{ fontFamily: 'monospace', fontSize: '0.8rem' }} />
        <button className="outline small" onClick={copy}>Copy</button>
      </fieldset>
    </div>
  );
}

Angular

<!-- URL input group -->
<label style="font-size:0.8125rem;font-weight:500;display:block;margin-bottom:6px">
  Tenant domain
</label>
<fieldset class="group">
  <legend>https://</legend>
  <input type="text" [(ngModel)]="domain" placeholder="acme.yourdomain.com" />
</fieldset>

<!-- Search + button -->
<fieldset class="group">
  <input type="search" [(ngModel)]="query" placeholder="Search..." />
  <primus-button size="sm" (clicked)="onSearch()">Search</primus-button>
</fieldset>

<!-- API key copy -->
<fieldset class="group">
  <input type="text" [value]="apiKey" readonly
    style="font-family:monospace;font-size:0.8rem" />
  <button class="outline small" (click)="copyKey()">Copy</button>
</fieldset>

Props

<fieldset class="group"> (@primus/ui-core)

Child element	Renders as
<legend>	Prefix or suffix label (attached flush to input)
<input>	The main input field
<button>	Attached action button

PrimusInputGroup (React/Angular)

Prop	Type	Default	Description
prefix	string | ReactNode	—	Left-attached label
suffix	string | ReactNode	—	Right-attached label or button
error	string	—	Error message shown below

Version history

See the Changelog for version history and breaking changes.