SelectList
SelectList displays a list of actions or options using the browser’s native select.
Props
Usage guidelines
- Presenting users with a list of options that utilizes the browser’s or device’s native select functionality.
- Presenting users with a list of options to choose from, like display settings.
Best practices
Use SelectList when the user needs to select from a simple list of items.
Use SelectList when additional functionality such as subtext or images are needed. Use Dropdown instead.
Order the list items in SelectList either alphabetically or by usage.
Use SelectList if there are fewer than 4 items in the list and there is space to display all options. Use RadioButtons instead.
Keep the same type of selection for a group of items. An example of this might be a filter bar. If some items could use SelectList and some items need to use Dropdown, use Dropdown for all the items in the group.
Mix Dropdown and SelectList in a group of items.
Accessibility
Labels
SelectList comes with Label built-in: just use the label
prop - we strongly encourage always supplying a label. Be sure to provide a unique id
so the Label is associated with the correct SelectList.
Variants
Size
Use lg
as the recommended size within Pinterest products.
Use md
on denser surfaces, such as Business products or internal tools.
Helper text
Helper text should be used when additional description may be required to understand the SelectList. Most commonly, this could be text that is legally required to be displayed, or instructions to fill out a form (e.g. proper formatting). If the text is optional, Tooltip could be used instead.
Controlled component
SelectList must be used as a controlled component when the placeholder
or value
props are needed. When used in this manner, onChange
and value
are required, while placeholder
is optional.
Error message
Error message should be used to denote an error state in the specific SelectList and to provide a message for how the user can fix it.
Related
Dropdown
If additional functionality is needed in the menu, such as subtext, headers or custom styling, use Dropdown.
Typeahead
If users need the ability to choose an option by entering text to filter a long list of options, use Typeahead.
RadioButton
If users need the ability to choose between fewer than 4 options, use RadioButton.
Checkbox
If users need the ability to choose between a yes/no option, use Checkbox.