Select component

Usage

Import like this:

import { Select, Option } from '@tdcerhverv/select';

Use like this:

<Select onChange={myChangeHandler}>
  <Option value="value1">Text 1</Option>
  <Option value="value2">Text 2</Option>
  <Option value="value3">Text 3</Option>
</Select>

It is also possible to group the options:

import { Select, Option, OptionGroup } from '@tdcerhverv/select';

<Select onChange={myChangeHandler}>
  <OptionGroup label="1-3">
    <Option value="value1">Text 1</Option>
    <Option value="value2">Text 2</Option>
    <Option value="value3">Text 3</Option>
  </OptionGroup>
  <OptionGroup label="4-6">
    <Option value="value4">Text 4</Option>
    <Option value="value5">Text 5</Option>
    <Option value="value6">Text 6</Option>
  </OptionGroup>
</Select>

Props

interface ISelect extends SelectHTMLAttributes<HTMLSelectElement> {
  labelText?: string;
  error?: string | boolean;
  hideValidation?: boolean;
  validateBeforeFocus?: boolean;
}

It supports all standard attributes for the <select> element.

Option and OptionGroup supports any and all standard attributes of their native equivalent.

Tags

select, selection, option, options, dropdown