Select
The Select component provides a versatile and user-friendly dropdown menu for selecting a single option from a list.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import Select from '@start-base/react-form-elements/Select';Usages
Select With Label
Select With Placeholder
Placeholder
Select With Placeholder And Label
Placeholder
Select With Placeholder And Label And Disable Shrink
Placeholder
Select Disabled
Placeholder
Select Multiple
Placeholder
Select Error
API
This component is a wrapper around react-select (opens in a new tab) component. All props from react-select API Reference (opens in a new tab) can be passed to this component.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| value | object or array | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| options | array | [] | Array of options to display |
| classNames | object | null | ClassNames object for select components |
| components | object | null | Components object for select |