SelectList
SelectList displays a list of actions or options using the browser’s native select.
Props
Usage guidelines
- When presenting users with a list of options that utilizes the native select functionality of the browser or device.
- When 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 RadioButton instead.
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. Common examples include 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
errorMessage
should be used to denote an error state in 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.