bpk-component-select

bpk-component-select

Backpack select component.

Installation

Check the main Readme for a complete installation guide.

Usage (controlled)

import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';

export default () => (
  <BpkSelect
    id="fruits"
    name="fruits"
    value="oranges"
    onChange={(e) => console.log(`select changed to ${e.target.value}`)}
  >
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="pears">Pears</option>
  </BpkSelect>
);

Usage (uncontrolled)

import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';

export default () => (
  <BpkSelect
    id="fruits"
    name="fruits"
    defaultValue="oranges"
  >
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="pears">Pears</option>
  </BpkSelect>
);

Props

Check out the full list of props on Skyscanner's design system documentation website.