Select
Component that lets the user select an option from a list of options.
select
Import
JSX
Usage
JSX
Note that the field name in formData that holds the value of the Select component
needs to be the same as the name that is given to the Select component like you are used to
when creating controlled inputs.
If the Select input is not part of a form and you only need the value, you can ignore the name
parameter in handleChange as shown below:
JSX
Return value
(name: string, value: string | (string | number)[]) where the name value represents
the given name of the Select input and the value the chosen value out of the options.
Variants
No Label
JSX
Description
Select
Select your favorite car brand
JSX
Multiple
Select
JSX
Disabled
Select
JSX
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | select | id of select input |
name* | string | select | name of select input |
values* | (string | number)[] | [] | array of selected option(s) |
onSelect* | (name: string, value: string | (string | number)[]) => void | - | callback function that handles select change |
options* | (string | number)[] | [] | array of options to choose from |
label | string | - | Label above the select input |
multiple | boolean | false | Enable selection of multiple options |
placeholder | string | - | Placeholder for inside select input |
disabled | boolean | false | disables/enables select input |
width | string | 15rem | sets the width of the input |
description | string | "" | displays a description about the input |