Skip to contentSkip to navigationSkip to topbar
Figma
Star

Select

A Select is an unstyled dropdown form element that allows users to select a value from a list.

Version 12.1.2
Github

Installation

Installation page anchor
yarn add @twilio-paste/select
import {Select, Option} from '@twilio-paste/core/select';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/help-text';

<Label htmlFor="foo" required>Foo</Label>
<Select id="foo" name="foo" onChange={FOO} required>
  <Option value="foo-bar">Foo Bar</Option>
  <Option value="bar-foo">Bar Foo</Option>
</Select>
<HelpText variant="default">Select one</HelpText>

Option

Option page anchor

value RequiredRequired

Sets the value of the select. Expects an array when multiple is present. Required

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
OPTION

label RequiredRequired

Sets the label of the option group.

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
OPTION_GROUP

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SELECT

hasError

Sets the input to an error state.

Type
boolean

id

Sets the id of the input. Should match the htmlFor of Label

Type
string

insertAfter

Add Suffix to the select input.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

insertBefore

Add Prefix to the select input.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

onChange

Callback function called when user selects an option.

Type
(event: ChangeEvent<HTMLSelectElement>) => void

value

Sets the value of the select. Expects an array when multiple is present.

Type
string | string[]

variant

Sets the visual style of the select.

Type
Variants
Default
default