Select

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

View in StorybookView in Playroom

Quick Start

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

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

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

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.