Select Preview

A select lets people choose a single option from a list of at least four options. Selects use browser native styling for the listed options. They are ideal for data submission in forms and ease of use on mobile platforms.

If you need to control the styles or format the options in the list, try a dropdown. If you need to let someone type in the visible field to submit a free form answer, or to filter the list of options, try a combobox. For a standardized form component including helper text and validation styles, use the select field component.

Loading...
Open in CodeSandbox
Select storybook
React guidance

Properties

appearance

Controls the colors and borders of the Select.

“outline” “underline” “filled-darker” “filled-lighter”
Default:
“‘outline’”

as

“select”
Default:
none

icon

The icon, typically a down arrow

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

onChange

Called when the user changes the select element’s value by selecting an option.

((ev: ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void)
Default:
none

root

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

select

Primary slot: the actual <select> element

WithSlotShorthandValue<{ as?: "select"; } & Pick<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "key" | keyof SelectHTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

size

Matches the Input sizes

“small” “medium” “large”
Default:
“‘medium’”