Select
A Select is an unstyled dropdown form element that allows users to select a value from a list.
<><Label htmlFor="author">Select an author</Label><Select id="author"><Option value="baldwin">James Baldwin</Option><Option value="brown">adrienne maree brown</Option><Option value="butler">Octavia Butler</Option><Option value="coates">Ta-Nehisi Coates</Option><Option value="lorde">Audre Lorde</Option><Option value="nnedi">Nnedi Okorafor</Option></Select></>
A select allows users to select an option from a list in a form field. It is used with the Label and Help Text components.
Select allows a user to make a selection from a list of options in a form field. By default, it will show the first option in the list. However, you can also set a different pre-selected option from your list to show.
At its most basic, a Select has an options list that’s styled according to the browser default. A Combobox has a Twilio-styled options list and can allow for additional functionality like typeahead.
Use a Select when:
- You need a native picker experience, especially on mobile devices.
- Users will be selecting from a list of 4-10 options, or a sorted list of highly familiar options, like an alphabetical list of states or countries.
- You need the component to work out-of-the-box across all operating systems and browsers.
Use a Combobox when:
- You need a Twilio-styled options list.
- You need to show more than text in an option, like text paired with an icon.
- Users would benefit from typeahead functionality. For example, typeahead may be useful when users need to select from a list of more than 10 options.
- You need to lazy load a much longer list of options to improve page load performance.
- Include a visible label on all form fields.
- Each label must use the
htmlFor
prop that equals theid
of the associated input. - Label a form field using one of these methods:
- Visible label with Label (preferred)
- Visible label that's associated to the input with
aria-labelledby
- Label directly using
aria-label
- Provide clear identification of required fields in the label or at the start of a form. If you use the required field indicator, include the form key at the start of the form.
- Use the
required
prop to programatically indicate they are required to browsers.
- Use the
- Include inline error text with the error icon on any field that errors to make it visually clear that the field changed.
- If the input has assicated help text or error text, include the
aria-describedby
prop on the input. This should match theid
of the help or error text.
The base Select is the input without any supporting elements (e.g., label, help text, etc).
- Options — The list of items contained in a Select
- Selected value — (Optional) The value that appears in the select on page load. By default, this is the first option in the list.
The Select will fill the width of the container it’s placed in.
<><Label htmlFor="author">Select an author</Label><Select id="author"><Option value="baldwin">James Baldwin</Option><Option value="brown">adrienne maree brown</Option><Option value="butler">Octavia Butler</Option><Option value="coates">Ta-Nehisi Coates</Option><Option value="lorde">Audre Lorde</Option><Option value="nnedi">Nnedi Okorafor</Option></Select></>
The Select component should include the base Select, along with supporting elements to compose a Select form field that gives the user the context they need to successfully fill it out.
- Label — A label should be included for every form field and provide a short title for its associated input.
- Required field indicator — In a form where there are fewer or as many required fields as optional, use a required indicator to show users which fields are required to be filled out.
- Optional field indicator — In a form where there are more required fields than optional fields, use an optional indicator to show users which fields they don’t have to fill out. In general, ask for information only when needed. Consider removing the optional fields.
- Help text — Text that’s placed below the field to help users prevent an error and describe what makes the form field successful.
Accessibility insight
Make sure to connect the Label
to the Select
. This is done with the htmlFor
prop on the label, and the id
prop on the select. Those two need to match.
<><Label htmlFor="select_product_demo" required>Select a product</Label><Select id="select_product_demo" htmlFor="select_product_demo" required><Option value="messaging">SMS</Option><Option value="numbers">Phone Numbers</Option><Option value="video">Video</Option></Select><HelpText variant="default">Choose a Twilio product.</HelpText></>
- Prefix/suffix text - Text that can be used as a prefix or suffix to the value that is entered. Use prefix/suffix to help users format text.
- Icon - Icons that can be placed in the same area as the prefix and suffix text. Icons should trigger an action (e.g., opening a popover).
<><Label htmlFor="select_add_ons_prefix_demo">Phone number</Label><Selectid="select_add_ons_prefix_demo"htmlFor="select_add_ons_prefix_demo"insertBefore={<Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">+1</Text>}><Option value="cats">(415) 555-CATS</Option><Option value="dogs">(415) 555-DOGS</Option><Option value="mice">(415) 555-MICE</Option></Select><HelpText variant="default">Select with prefix.</HelpText></>
<><Label htmlFor="select_add_ons_suffix_demo">Phone number</Label><Selectid="select_add_ons_suffix_demo"htmlFor="select_add_ons_suffix_demo"insertAfter={<Button variant="link"><InformationIcon decorative={false} size="sizeIcon20" title="Get more info" /></Button>}><Option value="cats">(415) 555-CATS</Option><Option value="dogs">(415) 555-DOGS</Option><Option value="mice">(415) 555-MICE</Option></Select><HelpText variant="default">Select with suffix.</HelpText></>
To be consistent with React's documentation on best practices for native select elements, the selected
attribute is not allowed in the API.
You can instead select a defaultValue
property for the select.
<><Label htmlFor="default_value_demo" required>Phone number</Label><Selectid="default_value_demo"htmlFor="default_value_demo"defaultValue="dogs"><Option value="cats">(415) 555-CATS</Option><Option value="dogs">(415) 555-DOGS</Option><Option value="mice">(415) 555-MICE</Option></Select></>
Use an OptionGroup
to create groupings of options within the select element.
label
- String that will be used as the group label, this is required.
<><Label htmlFor="option_group_demo" required>Product offering</Label><Selectid="option_group_demo"htmlFor="option_group_demo"><OptionGroup label="SMS"><Option value="geomatch">Area-code geomatch</Option><Option value="channels">Channels</Option><Option value="short-codes">Short codes</Option></OptionGroup><OptionGroup label="Voice"><Option value="conference">Conference</Option><Option value="recording">Recordings</Option><Option value="tts">Text to Speech</Option></OptionGroup><OptionGroup label="Video"><Option value="hipaa">HIPAA eligibility</Option><Option value="p2p">Peer to peer</Option><Option value="recordings">Recordings</Option></OptionGroup></Select><HelpText variant="default">Select a product to learn more.</HelpText></>
Avoid errors on selects by removing or disabling invalid options from the list of options.
If a user is able to choose an invalid option, change a Select to its error state and use Help Text to add an inline error. The Help Text inline error is placed below the field to inform a user of any errors in their value. If help text exists, the error text should replace and repeat the help text.
<><Label htmlFor="inline_error_demo">Emergency caller ID</Label><Selectid="inline_error_demo"htmlFor="inline_error_demo"hasError><Option value="cats">(415) 555-CATS</Option><Option value="dogs">(415) 555-DOGS</Option><Option value="mice">(415) 555-MICE</Option></Select><HelpText variant="error">The number you have selected is not configured for emergency calling.</HelpText></>
Use a disabled option as the default selected value if you have no valid option to safely default to and the field is required.
Otherwise, use disabled options sparingly. Most browsers show disabled option text with low contrast, so consider other ways you could communicate that an option is unavailable, if you need to at all.
<><Label htmlFor="disabled_options_demo">Phone number capability</Label><Selectid="disabled_options_demo"htmlFor="disabled_options_demo"><Option disabled value="fax">Fax</Option><Option disabled value="voice">Voice</Option><Option value="sms">SMS</Option></Select><HelpText variant="default">Some options in this select are disabled.</HelpText></>
Use a disabled form field to show users that they can’t interact with the field.
If you want to show information that can’t be edited, use a read-only Input or consider another way of showing static information.
<><Label htmlFor="disabled_select_demo" disabled>Phone number capabilities</Label><Selectid="disabled_select_demo"htmlFor="disabled_select_demo"disabled><Option value="fax">Fax</Option><Option value="voice">Voice</Option><Option value="sms">SMS</Option></Select><HelpText variant="default">This select is currently disabled.</HelpText></>
A select field should be composed with at least a label and a select.
Stack form fields vertically with $space-80
spacing between each field.
<><Box marginBottom="space80"><Label htmlFor="voice_callback_method">HTTP method</Label><Select required id="voice_callback_method"><Option value="get">GET</Option><Option value="post">POST</Option><Option value="put">PUT</Option></Select></Box><Box><Label htmlFor="voice_callback">Primary Voice callback</Label><Input id="voice_callback" name="voice_callback" type="text" placeholder="https://demo.twilio.com/welcome/voice/" onChange={() => {}} required/></Box></>
Avoid placing multiple form fields on the same horizontal row to help make it easier to scan a page vertically. Use the Grid component if you need to place form fields horizontally.
Keep option text concise and simple. Option text will truncate when it’s longer than the width of the container. If choosing options requires more explanation, consider using a Radio Group instead and add help text for each option, or give more explanation through help text.
Use a safe and reversible option as the default selected value, or an option that tells users to choose from the list. For example, on page load, a select could show “Choose category" as the default value if there’s no safe default.
Use 4-10 options in a select, or a sorted list of highly familiar options (e.g., alphabetical list of states), since selects don’t allow for searching or filtering through options. Sort options logically (e.g., alphabetically, by value) or in an order that’s intuitive to your user.
Labels should clearly describe the value being requested. They should be concise and descriptive, not instructional. To do this:
- Use help text to provide instruction if needed. For example, don’t use “Choose a nickname for your reference only” as label text. Instead, use “Nickname” as a label and “Nickname is for your reference only. This won’t be displayed to recipients.” as help text.
- Avoid articles (“a”, “the”) and punctuation. For example, use “SIM registration code” rather than “The SIM registration code”.
To support internationalization, avoid starting a sentence with the label and using the field to finish it since sentence structures vary across languages. For example, use “Call log expiration date” or “How long should logs be stored?”. Don’t use “Remove logs after:”.
Give users enough information in help text to prevent input and formatting errors. Keep it concise and scoped to information that will help with validation. For example, use help text if a password field has specific requirements that a user should know prior to filling it out.
If you need to use more than two sentences to explain a field, link out to supporting docs or trigger a popover instead.
Ask for information only when needed. Consider removing the field otherwise.
In a form where there are fewer optional fields than required, use an optional indicator to show users which fields they don’t have to fill out. Otherwise, use required indicators to show users which fields they must fill out.
If a field is required and there’s no safe default selected value, default to a disabled option that tells users to choose an option (e.g., “Choose categories”). However, if the field is optional and there’s no safe default, keep the option enabled so that users can unselect.
Disable or remove any options in a select that would result in an error if possible. Validate form fields on form submission.
Don’t prevent form submission by disabling the submit button. A disabled button cannot be detected by assistive technologies. Use An error messages to explain what information is missing or incorrect.
Disable or remove any options in a select that would result in an error if possible. If an error occurs, use Help Text to show an inline error that explains how to fix the error.
For additional guidance on how to compose error messages, refer to the error state pattern.
- Prefix/suffix — Use a prefix or suffix to help users format their input and to provide more context about the value a user is entering. For example, you could prefix or suffix a field with a currency symbol. Make sure to consider internationalization when using prefixes or suffixes since formatting may differ across languages. For example, currency symbols are placed on the left in American English, while they're placed on the right in French. Don't use prefix/suffix text as a replacement for a label.
- Icon — Use an icon if you need to give the user additional controls for the field. For example, use an icon to clear a field on click, removing the need for users to manually delete their entered value. Place icon buttons that trigger an action on the right side of the field. If you need 2 actions on a field (e.g., popover trigger and clear field), place the icon button that affects the field value on the right, and the other icon on the left.
Use a select when:
- You need a native picker experience, especially on mobile devices.
- You need the component to work out-of-the-box across all operating systems and browsers.
Do
Sort options in a list logically (e.g., alphabetically, ascending, descending).
Don't
Don’t order options in a list randomly or in a “recommended” order that hasn’t been validated with users.
Do
Use a safe and reversible option as the default selected value, or an option that tells users to choose from the list. Prevent users from unintentionally submitting a default value in case they accidentally skip over a field.
Don't
Don’t restrict users to options that unnecessarily reinforce biases and discrimination, such as gender binaries. Consider whether you need this information at all. If so, pair a select with an input or allow users to opt out.
Do
Give users time to confirm their selection. Consider users who might select a wrong option accidentally.
Don't
Avoid triggering an action when a user selects an option. For example, don’t open a new page immediately after a user makes a selection. If they made the wrong selection, going back to the original page to make the right selection could be frustrating. Instead, allow users to make the selection, then confirm.
Do
Keep option text concise and simple. If choosing options require more explanation, expand in help text or consider using a Radio Group instead.
Don't
Avoid long option text that may truncate if it’s longer than the width of the container.
Do
Keep help text and error text concise and simple.
Don't
Don’t use more than 2 sentences in help text or error text.
Do
Include a visible label on every form field.
Don't
Don’t use prefix/suffix text as a replacement for a label.
Do
Use a disabled form field to show users that they can’t interact with the field, but that it could potentially be enabled through another UI element.
Don't
Don’t use a disabled form field to show information that can’t be edited. Instead, use a read-only form field or consider another way of showing static information.
Do
Use a checkbox group to allow users to make multiple selections.
Don't
When possible, avoid allowing multiple selection on a select component.
Property | Default token | Modifiable? |
---|---|---|
Label text |
| No |
Required field indicator |
| No |
Box Shadow |
| No |
Background |
| No |
Prefix/suffix |
| No |
Prefix/suffix text |
| No |
Help text | $color-text-weak, $font-size-30 | No |
Inline error |
| No |
Spacing |
| No |
Chevron |
| No |
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>
All the valid HTML attributes for select
are supported including the following props:
Prop | Type | Description | Default |
---|---|---|---|
id? | string | Sets the id of the input. Should match the htmlFor of Label . | null |
name? | string | Sets the name of the select. | null |
value? | string, string[] | Sets the value of the select. Expects an array when multiple is present. | null |
children | NonNullable>React.ReactNode> | Must be Option or OptionGroup . Required. | null |
disabled? | boolean | Disables the input. | false |
insertBefore? | React.ReactNode | Add Prefix to the select input. | null |
insertAfter? | React.ReactNode | Add Suffix to the select input. | null |
required? | boolean | Sets the input as required. | false |
hasError? | boolean | Sets the input to an error state. | false |
onChange? | (event: React.ChangeEvent<HTMLSelectElement>) | null | |
onFocus? | (event: React.MouseEvent<HTMLElement>) | null | |
onBlur? | (event: React.MouseEvent<HTMLElement>) | null | |
variant? | 'default', 'inverse' | 'default' | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'SELECT' |
All the valid HTML attributes for option
are supported including the following props:
Prop | Type | Description | Default |
---|---|---|---|
id | string | Sets the id of the input. Should match the htmlFor of Label . Required. | null |
name | string | Sets the name of the select. Required. | null |
value | string, string[] | Sets the value of the select. Expects an array when multiple is present. Required. | null |
disabled? | boolean | Disables the input. | false |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'OPTION' |
All the valid HTML attributes for optgroup
are supported including the following props:
Prop | Type | Description | Default |
---|---|---|---|
label | string | Sets the label of the optgroup. Required. | null |
children | <NonNullable>React.ReactNode | Must be Option . Required. | null |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'OPTION_GROUP' |
Changelog
733709127
#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnode
tobrowser
to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences
- Updated dependencies [
733709127
]:- @twilio-paste/uid-library@2.0.0
- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/input-box@10.0.0
- @twilio-paste/box@10.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.0.0
- @twilio-paste/icons@12.0.0
- @twilio-paste/animation-library@2.0.0
- @twilio-paste/styling-library@3.0.0
- @twilio-paste/style-props@9.0.0
- @twilio-paste/theme@11.0.0
- @twilio-paste/types@6.0.0
4d1f7c65e
#3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.Existing blocked component properties include:
className
style
color
48e5f1e5c
#3225 Thanks @nkrantz! - [Button, Help Text, In Page Navigation, Input, Input Box, Label, Select, Tab, Text Area] Update color text tokens for inverse styles
ac5a84407
#3110 Thanks @SiTaggart! - [Select] Fixed a bug in dark mode on Windows where the options list was still white and the options were unreadable
3ab2bb6f4
#3114 Thanks @SiTaggart! - ### Breaking changeWe have moved
@types/react
and@types/react-dom
to peer dependencies of the library. This should allow for greater control and backwards compatibility with older versions of React as Paste is no longer bundling the type libraries.Your application likely has both of these as dependencies anyway, but it is now up to you to manage that version number.
Action needed
Ensure
@types/react
and@types/react-dom
are installed as dependencies of your application.
- Updated dependencies [
1d75f223e
,50cde4668
,bce889344
,3ab2bb6f4
,3ab2bb6f4
]:- @twilio-paste/icons@11.0.0
- @twilio-paste/theme@10.0.0
- @twilio-paste/box@9.0.0
- @twilio-paste/input-box@9.0.0
- @twilio-paste/customization@7.0.0
- @twilio-paste/style-props@8.0.0
- @twilio-paste/types@5.0.0
d97098846
#3020 Thanks @SiTaggart! - This major version included listing all the missing peer dependencies for each Paste package.If you are using a package from Paste in isolation from Core, when upgrading to this latest version, be sure to correctly install all the missing peer dependencies.
3c89fd83d
#2965 Thanks @Niznikr! - [Select] Render options after mountedUpdated dependencies [
dbd9bf992
,3c89fd83d
,d97098846
,0acdf3486
,ef094db4a
,154b02c06
,0acdf3486
]:- @twilio-paste/design-tokens@9.0.0
- @twilio-paste/input-box@8.0.0
- @twilio-paste/box@8.0.0
- @twilio-paste/customization@6.0.0
- @twilio-paste/icons@10.0.0
- @twilio-paste/animation-library@1.0.0
- @twilio-paste/styling-library@2.0.0
- @twilio-paste/uid-library@1.0.0
- @twilio-paste/style-props@7.0.0
- @twilio-paste/theme@9.0.0
- @twilio-paste/types@4.0.0
- @twilio-paste/color-contrast-utils@4.0.0
a4c9e70b0
#2763 Thanks @shleewhite! - Update ESLint rules, which changed some formatting.
b79d20d2a
#2595 Thanks @TheSisb! - [InputBox, Combobox, Select] InputBox'sInputChevronWrapper
has refreshed styling which will appear in Select and Combobox. InputBox now exports agetInputChevronIconColor()
function which returns a textColor to use for styling the icon child to theInputChevronWrapper
.
- Updated dependencies [
12c4ba22a
,364083627
,364083627
,364083627
,364083627
]:- @twilio-paste/box@7.0.0
- @twilio-paste/style-props@6.0.0
- @twilio-paste/design-tokens@8.0.0
- @twilio-paste/theme@8.0.0
- @twilio-paste/input-box@7.0.0
- @twilio-paste/icons@9.0.0
d9c3b850
#2569 Thanks @SiTaggart! - [Select] fixed the disabled select background color
ae9dd50f
#2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.
- Updated dependencies [
09762f0f
,09762f0f1
,09762f0f1
]:- @twilio-paste/box@6.0.0
- @twilio-paste/styling-library@1.0.0
- @twilio-paste/theme@7.0.0
- @twilio-paste/input-box@6.0.0
- @twilio-paste/icons@8.0.0
- @twilio-paste/style-props@5.0.0
- Updated dependencies [
10178f39d
]:- @twilio-paste/icons@7.0.0
8e5dfe1e6
#2298 Thanks @shleewhite! - [Button, FormPillGroup, Menu, Pagination, Select] inherit fontFamily for i18n
73c596919
#2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
c867e3f48
#2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.
1f564a931
#2242 Thanks @shleewhite! - [Select] set the background color on the select, option, and optionGroup
- Updated dependencies [
0a52eeee
,39ab32c2
,0a52eeee
,04de0d1d
,04de0d1d
,04de0d1d
]:- @twilio-paste/design-tokens@7.0.0
- @twilio-paste/icons@6.0.0
- @twilio-paste/theme@6.0.0
- @twilio-paste/style-props@4.0.0
- @twilio-paste/input-box@5.0.0
- @twilio-paste/box@5.0.0
b7675915
#1985 Thanks @TheSisb! - For debugging purposes we now ship afilename.debug.js
unminified version of each component or library in Paste.
ed5c0a49c
#1965 Thanks @shleewhite! - Upgrade Paste to use React 17 by default, but maintain React 16 support for consumers.
01baddcd
#1925 Thanks @shleewhite! - Add displayNames to all components
7d231ec0
#1886 Thanks @andipants12! - [Select]: Enable Component to respect element customizations set on the customization provider. Component now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
fe4a2383
#1824 Thanks @SiTaggart! - [Combobox], [Select] and [Textarea] all given a default element name to meet their PropTypes validation.
a5c17a31
#1771 Thanks @richbachman! - [Select] Added theelement
prop for customization in order to fix a Typescript error after theelement
prop was added as a required prop forInputBox
andInputChevronWrapper
. This does not include any default naming, tests, or stories. It only fixes the Typescript error.
80529764
#1431 Thanks @richbachman! - Added a margin reset (margin: space0
) to fix a bug in Safari where a 2px margin is added by the browser.
0eded1fd
#1319 Thanks @SiTaggart! - Change internal dependencies to have minor range matching on version numbers
- Updated dependencies [
514bd5aa
,514bd5aa
]:- @twilio-paste/theme@5.0.1
- @twilio-paste/icons@5.1.1
- @twilio-paste/input-box@4.0.2
- @twilio-paste/box@4.0.2
- @twilio-paste/style-props@3.0.1
- Updated dependencies [
8b5a8592
]:- @twilio-paste/icons@5.1.0
7f909087
#1251 Thanks @richbachman! - Removed required from theid
,onChange
, andvalue
props, so Select can be used as an uncontrolled component. This allows Select to be used with libraries likeReact-Hook-Form
.
- Updated dependencies [
509eba7a
]:- @twilio-paste/box@4.0.1
- @twilio-paste/input-box@4.0.1
- @twilio-paste/icons@5.0.1
- Updated dependencies [
4c9ed5ca
,26c828d8
]:- @twilio-paste/design-tokens@6.6.0
- @twilio-paste/theme@5.0.0
- @twilio-paste/input-box@4.0.0
- @twilio-paste/box@4.0.0
- @twilio-paste/icons@5.0.0
- @twilio-paste/style-props@3.0.0
- Updated dependencies [
944c3407
,af779398
]:- @twilio-paste/design-tokens@6.5.2
- @twilio-paste/icons@4.0.2
- @twilio-paste/input-box@3.0.1
- @twilio-paste/box@3.0.1
- @twilio-paste/style-props@2.0.1
- @twilio-paste/theme@4.3.1
- Updated dependencies [
7340a6a5
]:- @twilio-paste/icons@4.0.1
- Updated dependencies [
f1675586
]:- @twilio-paste/theme@4.3.0
- @twilio-paste/input-box@3.0.0
- @twilio-paste/box@3.0.0
- @twilio-paste/icons@4.0.0
- @twilio-paste/style-props@2.0.0
a12acb61
#1158 Thanks @richbachman! - Pinned all twilio-paste package versions in order to keep them in sync with core when they are updated by changesets.Updated dependencies [
a12acb61
,a12acb61
,a12acb61
,a12acb61
,a12acb61
]:- @twilio-paste/theme@4.2.2
- @twilio-paste/input-box@2.1.2
- @twilio-paste/style-props@1.9.2
- @twilio-paste/box@2.13.2
- @twilio-paste/icons@3.13.1
- Updated dependencies [
4114dac2
]:- @twilio-paste/icons@3.13.0
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
1.2.1 (2021-01-25)
Note: Version bump only for package @twilio-paste/select
1.1.28 (2021-01-15)
Note: Version bump only for package @twilio-paste/select
1.1.27 (2021-01-14)
Note: Version bump only for package @twilio-paste/select
1.1.26 (2021-01-13)
Note: Version bump only for package @twilio-paste/select
1.1.25 (2021-01-07)
Note: Version bump only for package @twilio-paste/select
1.1.24 (2020-12-17)
Note: Version bump only for package @twilio-paste/select
1.1.23 (2020-12-17)
Note: Version bump only for package @twilio-paste/select
1.1.22 (2020-12-15)
Note: Version bump only for package @twilio-paste/select
1.1.21 (2020-12-11)
Note: Version bump only for package @twilio-paste/select
1.1.20 (2020-12-11)
Note: Version bump only for package @twilio-paste/select
1.1.19 (2020-12-09)
Note: Version bump only for package @twilio-paste/select
1.1.18 (2020-12-03)
Note: Version bump only for package @twilio-paste/select
1.1.17 (2020-12-02)
Note: Version bump only for package @twilio-paste/select
1.1.16 (2020-11-16)
Note: Version bump only for package @twilio-paste/select
1.1.15 (2020-11-11)
Note: Version bump only for package @twilio-paste/select
1.1.14 (2020-11-10)
Note: Version bump only for package @twilio-paste/select
1.1.13 (2020-11-06)
Note: Version bump only for package @twilio-paste/select
1.1.12 (2020-11-05)
Note: Version bump only for package @twilio-paste/select
1.1.11 (2020-10-30)
Note: Version bump only for package @twilio-paste/select
1.1.10 (2020-10-29)
Note: Version bump only for package @twilio-paste/select
1.1.9 (2020-10-23)
Note: Version bump only for package @twilio-paste/select
1.1.8 (2020-10-21)
Note: Version bump only for package @twilio-paste/select
1.1.7 (2020-10-19)
Note: Version bump only for package @twilio-paste/select
1.1.6 (2020-10-15)
Note: Version bump only for package @twilio-paste/select
1.1.5 (2020-10-13)
Note: Version bump only for package @twilio-paste/select
1.1.4 (2020-10-09)
Note: Version bump only for package @twilio-paste/select
1.1.3 (2020-10-07)
Note: Version bump only for package @twilio-paste/select
1.1.2 (2020-10-07)
Note: Version bump only for package @twilio-paste/select
1.1.1 (2020-10-07)
Note: Version bump only for package @twilio-paste/select
- select: create the package (81076d3)