Quick nav

Select

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

Version 2.0.2

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

Select

Prop	Type	Default	Description
`autoWidth`	boolean		Set this to true and the dropdown will take the width of its content, not the width of the select
`children`	ReactNode	-	Default value displayed in the Select
`className`	string	-	Add a specific class to the Select
`dataTest`	string	-	Add a data-test tag for automated tests
`disabled`	boolean		Disable the Select so the user cannot click on it
`error`	boolean	-	The Select is in an error state
`isCompact`	boolean		True for a compact appearance
`isOpen`	boolean		True if the option list is displayed
`listSize`	SelectListSize		Size of the list
`loading`	boolean	-	Whether or not the list is loading
`onChange`	(option: OptionType) => void	-	Callback when selected content changes
`options`	SelectOptiontype[]	-	List of available options
`selectedOption`	OptionType	-	The initial selected option
`showListIcon`	boolean		Whether or not to show the icon inside the dropdown list if it's available
`disablePortal`	boolean		Disables the component from appending the dropdown to the end of the body using ReactPortal

SelectInput

Prop	Type	Default	Description
`children`	ReactNode	-	Default value displayed in the Select Input
`isOpen`	boolean		True if the option list is displayed