Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Select

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

Version 12.1.2
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/select

Usage

Usage page anchor
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>

Props

Props page anchor

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

OptionGroup

OptionGroup page anchor

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

Select

Select page anchor

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