Select

An input that provides a selection of options.

It implements the <select> element.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Select.css';

Props

...props

Type…* (optional)

Additional props for the container; a <select> element.

Examples

Deep import.
import Select from 'device-agnostic-ui/public/components/Select.js';
Deep require.
const Select = require('device-agnostic-ui/public/components/Select.js');
Index import. Convenient, but technically inferior to a deep import.
import { Select } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Select } = require('device-agnostic-ui');
Simple.
import { Select } from 'device-agnostic-ui';

const result = (
  <Select>
    <option>Option A</option>
    <option>Option B</option>
  </Select>
);
Required, with a placeholder option.
import { Select } from 'device-agnostic-ui';

const result = (
  <Select required>
    <option value="" disabled selected>
      Options
    </option>
    <option value="A">Option A</option>
    <option value="B">Option B</option>
  </Select>
);
With a default value.
import { Select } from 'device-agnostic-ui';

const result = (
  <Select value="B">
    <option value="A">Option A</option>
    <option value="B">Option B</option>
  </Select>
);
With multiple option selection allowed. Note: Due to cross browser rendering and usability issues it’s recommended to use a <Toggle> group instead.
import { Select } from 'device-agnostic-ui';

const result = (
  <Select multiple size="2">
    <option>Option A</option>
    <option>Option B</option>
  </Select>
);
With a size matching the count of options + groups.
import { Select } from 'device-agnostic-ui';

const result = (
  <Select size="6">
    <optgroup label="Group 1">
      <option>Option A</option>
      <option>Option B</option>
    </optgroup>
    <optgroup label="Group 2">
      <option>Option C</option>
      <option>Option D</option>
    </optgroup>
  </Select>
);

Tags