Officina UI
Components

Select

Styled wrapper around the native HTML select element for simple single-choice menus.

Select is a thin, styled wrapper around the native <select> element, so it accepts the same props (value, onChange, disabled, name) and standard <option> children. Reach for it for simple, native single-choice menus where the OS picker is acceptable; for searchable or richly rendered options use Combobox instead.

Example

Preview
import { Select } from '@officina/ui';
import { useState } from 'react';

function CountrySelect() {
  const [value, setValue] = useState('us');
  return (
    <Select value={value} onChange={(e) => setValue(e.target.value)}>
      <option value="us">United States</option>
      <option value="it">Italy</option>
      <option value="jp">Japan</option>
    </Select>
  );
}

API

Select adds no props of its own. It forwards all standard <select> attributes (plus ref and className) to the underlying element.

On this page