Select
The Select component is a customizable dropdown menu that allows users to choose from a list of options. It supports various sizes, labels, and additional elements like prefixes and suffixes, making it versatile for different UI needs.
Usage
First of all, you need to import the Select component from the kitchn package.
import { Select } from "kitchn"Default
Sizes
Sizes, Prefix and Suffix
Disabled
Prefix and suffix disabled
Label
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
size | "small" | "normal" | "large" | "normal" | No | The size of the select dropdown. |
label | string | undefined | No | The label displayed above the select dropdown. |
placeholder | string | undefined | No | The placeholder text shown in the dropdown before any option is selected. |
prefix | JSX.Element | string | undefined | No | An element or text to display before the dropdown selector. |
suffix | JSX.Element | string | Arrow Icon | No | An element or text to display after the dropdown selector. By default, an arrow icon is used. |
disabled | boolean | false | No | If true, disables the select input. |