Select

Allows the user to make a single selection from a short list of values within a form context.

Will be soon deprecated and renamed as NativeSelect.

View in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Select } from '@adaptavant/eds-core';
Added
1.0.0

Basic Usage​

Wrap Select in a Field to give it a label, then pass an options array of label/value pairs.

<Field label="Animals">
	<Select
		options={[
			{
				"label": "Lion",
				"value": "lion"
			},
			{
				"label": "Elephant",
				"value": "elephant"
			},
			{
				"label": "Dolphin",
				"value": "dolphin"
			}
		]}
	/>
</Field>
View in Playroom

Size​

Customize the size of the Select by using the size prop for the Field.

{/* standard */}
<Field label="Animals" size="standard">
	<Select
		options={[
			{
				"label": "Lion",
				"value": "lion"
			},
			{
				"label": "Elephant",
				"value": "elephant"
			}
		]}
	/>
</Field>

{/* large */}
<Field label="Animals" size="large">
	<Select
		options={[
			{
				"label": "Lion",
				"value": "lion"
			},
			{
				"label": "Elephant",
				"value": "elephant"
			}
		]}
	/>
</Field>
View in Playroom

Examples​

Here are some examples of how to use the Select component.

{/* Basic */}
<Field label="Animals">
	<Select
		options={[
			{
				"label": "Lion",
				"value": "lion"
			},
			{
				"label": "Elephant",
				"value": "elephant"
			},
			{
				"label": "Dolphin",
				"value": "dolphin"
			},
			{
				"label": "Penguin",
				"value": "penguin"
			},
			{
				"label": "Panda",
				"value": "panda"
			},
			{
				"label": "Gorilla",
				"value": "gorilla"
			}
		]}
	/>
</Field>

{/* Select With Placeholder */}
<Field label="Animals">
	<Select
		options={[
			{
				"label": "Lion",
				"value": "lion"
			},
			{
				"label": "Elephant",
				"value": "elephant"
			},
			{
				"label": "Dolphin",
				"value": "dolphin"
			},
			{
				"label": "Penguin",
				"value": "penguin"
			},
			{
				"label": "Panda",
				"value": "panda"
			},
			{
				"label": "Gorilla",
				"value": "gorilla"
			}
		]}
		placeholder="Select an animal"
	/>
</Field>

{/* SelectWithGroups */}
<Field label="Animals">
	<Select
		options={[
			{
				"label": "Australian animals",
				"options": [
					{
						"label": "Kangaroo",
						"value": "kangaroo"
					},
					{
						"label": "Tasmanian Devil",
						"value": "tasmanian-devil"
					},
					{
						"label": "Wombat",
						"value": "wombat"
					},
					{
						"label": "Platypus",
						"value": "platypus"
					},
					{
						"label": "Emu",
						"value": "emu"
					},
					{
						"label": "Drop Bear",
						"value": "drop-bear"
					}
				]
			},
			{
				"label": "Indian animals",
				"options": [
					{
						"label": "Bengal Tiger",
						"value": "bengal-tiger"
					},
					{
						"label": "Indian Elephant",
						"value": "indian-elephant"
					},
					{
						"label": "Indian Rhinoceros",
						"value": "indian-rhinoceros"
					},
					{
						"label": "Indian Peafowl",
						"value": "indian-peafowl"
					},
					{
						"label": "Indian Cobra",
						"value": "indian-cobra"
					},
					{
						"label": "Sloth Bear",
						"value": "sloth-bear"
					}
				]
			},
			{
				"label": "Polish animals",
				"options": [
					{
						"label": "European Bison",
						"value": "european-bison"
					},
					{
						"label": "Gray Wolf",
						"value": "gray-wolf"
					},
					{
						"label": "Eurasian Lynx",
						"value": "eurasian-lynx"
					},
					{
						"label": "White-Tailed Eagle",
						"value": "white-tailed-eagle"
					},
					{
						"label": "Brown Bear",
						"value": "brown-bear"
					},
					{
						"label": "European Beaver",
						"value": "european-beaver"
					}
				]
			}
		]}
	/>
</Field>

{/* Disabled With Placeholder */}
<Field isDisabled label="Animals">
	<Select
		options={[
			{
				"label": "Lion",
				"value": "lion"
			},
			{
				"label": "Elephant",
				"value": "elephant"
			},
			{
				"label": "Dolphin",
				"value": "dolphin"
			},
			{
				"label": "Penguin",
				"value": "penguin"
			},
			{
				"label": "Panda",
				"value": "panda"
			},
			{
				"label": "Gorilla",
				"value": "gorilla"
			}
		]}
		placeholder="Select an animal"
	/>
</Field>
View in Playroom

API Reference​

Select

PropDefaultDescription
options_OptionsOrGroups
Options or option groups to render in the select.
placeholder?_string
Placeholder text when no value is selected.
defaultValue?_string | number | readonly string[] | undefined
Initial value for uncontrolled usage.
name?_string
Name attribute for the select element.
onBlur?_React.FocusEventHandler<HTMLSelectElement>
Handler for blur events.
onChange?_React.ChangeEventHandler<HTMLSelectElement>
Handler for change events.
onFocus?_React.FocusEventHandler<HTMLSelectElement>
Handler for focus events.
value?_string | number | readonly string[] | undefined
Controlled value.

Usage guidelines​

Do

  1. Native select functionality: Implement a Select when presenting users with a list of options that leverages the native select functionality of the browser or device.
  2. List of options to choose from: Use Select when providing users with a list of options, such as display settings.

Don’t

  1. Options are links navigating to different places: If the options act as links that navigate users to different places, choose ComboBox instead of Select.

Best practices​

Do

select1

Arrange the items in the Select either alphabetically or by usage, based on your preference or user patterns.

Don’t

select2

Opt for SelectList when the list contains fewer than 4 items, and there is ample space to display all options. Alternatively, consider using RadioGroup.

Do

select3

Maintain consistent selection types for a group of items, such as in a filter bar. If some items require Select and others need DropdownMenu, use Select for all items within the group for uniformity.

Don’t

select4

Combine DropdownMenu and Select within a group of items for varied selection types.