Select

Dropdown for single or multi-value selection. Uses native <select> styled by @primus/ui-core.

Preview · Select

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:320px">
  <label>Plan
    <select>
      <option value="">Choose a plan...</option>
      <option>Starter</option>
      <option>Pro</option>
      <option>Enterprise</option>
    </select>
  </label>
  <div data-field="error">
    <label>Region
      <select aria-invalid="true"><option>Choose region...</option></select>
    </label>
    <span class="error">Please select a region.</span>
  </div>
</div>

React

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

const options = [
  { value: 'starter', label: 'Starter' },
  { value: 'pro', label: 'Pro' },
  { value: 'enterprise', label: 'Enterprise' },
];

<PrimusSelect label="Plan" options={options} value={plan} onChange={setPlan} />
<PrimusSelect label="Region" options={regions} error="Please select a region." />

Angular

<primus-select label="Plan" [options]="planOptions" (valueChange)="onPlan($event)">
</primus-select>
<primus-select label="Region" [options]="regions" error="Please select a region.">
</primus-select>

Props

Prop	Type	Default	Description
label	string	—	Label text
options	SelectOption[]	[]	Options {label,value,disabled?}
value	string	—	Selected value
multiple	boolean	false	Multi-select
error	string	—	Error message

Accessibility

• Native <select> — fully keyboard navigable with ↑↓ and Enter
• Label association handled automatically via for/id pairing
• Error state sets aria-invalid="true"
• Disabled options use the native disabled attribute

Version history

See the Changelog for version history and breaking changes.