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/Select.css";

Props

...props

Type…* (optional)

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

Examples

How to import.
import Select from "device-agnostic-ui/Select.mjs";
Simple.
import Select from "device-agnostic-ui/Select.mjs";

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

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/Select.mjs";

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/Select.mjs";

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/Select.mjs";

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