Components
Dropdown for selecting an item from a larger set.
Version: | 14.18.2 •View source•Changelog•Report issue | |
---|---|---|
Install: | yarn add @thumbtack/thumbprint-react | |
Import: | import { Dropdown } from '@thumbtack/thumbprint-react'; |
Dropdown
is a controlled component. This means that the selected option
, if any, must be provided as the value
prop. The onChange
function updates the value
when the user selects a new option.
In this example, notice how value
is stored within a React.useState
object. The onChange
function updates the state when the user selects a new option.
This is the default size for Dropdown
.
By default, the Dropdown
component renders as an inline-block
element. Its width is determined by the option
with the longest text.
The isFullWidth
prop can be used to set the width to 100%.
The isDisabled
prop visually and functionally disables the Dropdown
.
The hasError
prop can be used to visually represent an error.
This prop only changes the select dropdown’s color. It should be used alongside an error message that helps users advance through the form.
The Dropdown can be passed a TypeScript type for the value
prop.
This is useful when you are using Dropdown to select between values of an Enum. This same type will be recieved by the onChange
prop.
enum State {CA,NY,TN,FL,}function DropdownExample() {const [value, setValue] = React.useState<State>(State.CA);return (<div><Label for="example-7">Select a state</Label><Dropdown<State> id="example-7" hasError value={value} onChange={v => setValue(v)}><option value={State.NY}>New York</option><option value={State.CA}>California</option><option value={State.TN}>Tennessee</option><option value={State.FL}>Florida</option></Dropdown></div>);}
value
The value
of the <option>
that is selected. See React documentation
on <select>
and controlled components
to learn more.
T
onChange
A function that is fired when the value of the select changes. The
new value
is passed to the function.
(value: T, event: React.ChangeEvent<HTMLSelectElement>) => void
children
A collection of HTML <option>
elements.
React.ReactNode
id
Adds a HTML id
attribute to the select. This is used for linking the HTML with a
Label.
string
isDisabled
Visually and functionally disables the select dropdown.
boolean
false
isRequired
Adds required
HTML attribute to element, indicating that an option with a non-empty string
value must be selected.
boolean
false
hasError
Makes the radio and text color red.
boolean
false
size
Changes the select’s font-size, height, and padding.
This prop can be one of the following 2 types:
'small'
'large'
'large'
isFullWidth
Set the <select>
’s width to 100%
as opposed to the default behavior
of only taking up the necessary width.
boolean
false
onClick
Function that is fired when the value of the select changes.
(event: React.MouseEvent<HTMLSelectElement, MouseEvent>) => void
(): void => {}
onFocus
Fires when the select receives focus.
(event: React.FocusEvent<HTMLSelectElement>) => void
onBlur
Fires when the select loses focus.
(event: React.FocusEvent<HTMLSelectElement>) => void
dataTestId
A selector hook into the React component for use in automated testing environments.
string
dataTest
A selector hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
string
name
Adds name
HTML attribute to element, indicating the property name associated with the
selected value.
string
accessibilityLabel
This adds an aria-label
to the element. It should only be used in cases where the
<Dropdown>
doesn’t have or can’t be associated with a related <label>
. Learn more about
the importance of using labels.
string