SelectList displays a list of actions or options using the browser’s native select.
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.
lg as the recommended size within Pinterest products.
md on denser surfaces, such as Business products or internal tools.
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.
SelectList must be used as a controlled component when the
value props are needed. When used in this manner,
value are required, while
placeholder is optional.
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.
If additional functionality is needed in the menu, such as subtext, headers or custom styling, use Dropdown.
If users need the ability to choose an option by entering text to filter a long list of options, use Typeahead.
If users need the ability to choose between fewer than 4 options, use RadioButton.
If users need the ability to choose between a yes/no option, use Checkbox.