Dropdown
Dropdown for selecting an item from a larger set
Dropdown sizes
This is the default size for dropdowns.
Large
<label class="tp-label" for="example-size-large">Select a state</label><select id="example-size-large" value="ca" class="tp-select"><option value="ny">New York</option><option value="ca">California</option><option value="tn">Tennessee</option><option value="fl">Florida</option></select>
Small
The tp-select--small
class renders a smaller dropdown.
<label class="tp-label" for="example-size-small">Select a state</label><select id="example-size-small" value="ca" class="tp-select tp-select--small"><option value="ny">New York</option><option value="ca">California</option><option value="tn">Tennessee</option><option value="fl">Florida</option></select>
Widths
By default, the dropdown renders as an inline-block
element. Its width is determined by the option
with the longest text.
The tp-select--full
class can be used to set the width to 100%.
Full width
<select value="ca" class="tp-select tp-select--full"><option value="ny">New York</option><option value="ca">California</option><option value="tn">Tennessee</option><option value="fl">Florida</option></select>
Disabled selects
The disabled
attribute visually and functionally disables the dropdown.
<label class="tp-label tp-label--disabled" for="example-disabled">Select a state</label><select id="example-disabled" value="ca" disabled class="tp-select"><option value="ny">New York</option><option value="ca">California</option><option value="tn">Tennessee</option><option value="fl">Florida</option></select>
Dropdown with an error
The tp-select--bad-news
class can be used to visually represent an error.
This prop only changes the dropdown’s color. It should be used alongside an error message that helps users advance through the form.
<label class="tp-label tp-label--bad-news" for="example-disabled">Select a state</label><select id="example-disabled" value="ca" class="tp-select tp-select--bad-news"><option value="ny">New York</option><option value="ca">California</option><option value="tn">Tennessee</option><option value="fl">Florida</option></select>