Select

Select inputs let users choose one option from an options menu.

Installation

To install @igloo-ui/select in your project, you will need to run the following command using npm:

npm install @igloo-ui/select

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/select

Usage

Then to use the component in your code just import it!

import Select from '@igloo-ui/select';

<Select
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
>
  Place holder
</Select>;

API

Dropdown

PropTypeDescription
childrenReactNodeDefault value displayed in the Dropdown.
isOpenbooleanTrue if the Dropdown list is displayed.
onClose() => voidCallback when the user clicks outside the Dropdown.
positionPositionPosition of the Dropdown.
dataTeststringAdd a data-test tag for automated tests.

Select

PropTypeDescription
childrenReactNodeDefault value displayed in the Select.
classNamestringAdd a specific class to the Select.
dataTeststringAdd a data-test tag for automated tests.
disabledbooleanDisable the Select so the user cannot click on it.
errorbooleanThe Select is in an error state.
isCompactbooleanTrue for a compact appearance.
isOpenbooleanTrue if the option list is displayed.
onChange(option: SelectOption) => voidCallback when selected content changes.
optionsSelectOption[]List of available options.
selectedOptionSelectOptionThe initial selected option.

SelectInput

PropTypeDescription
childrenReactNodeDefault value displayed in the Select Input.
isOpenbooleanTrue if the option list is displayed.