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
<Container row> <Select placeholder={"Select your animal"}> <option value={"dog"}>{"Dog"}</option> <option value={"cat"}>{"Cat"}</option> </Select> </Container>
↓Code Editor
↓Code Editor
<Container row> <Select placeholder={"Select your animal"}> <option value={"dog"}>{"Dog"}</option> <option value={"cat"}>{"Cat"}</option> </Select> </Container>
Sizes
<Container gap={10} align={"center"} row> <Container> <Select size={"small"} placeholder={"Small"}> <option value={"dog"}>{"Dog"}</option> <option value={"cat"}>{"Cat"}</option> </Select> </Container> <Container> <Select size={"normal"} placeholder={"Default"} /> </Container> <Container> <Select size={"large"} placeholder={"Large"} /> </Container> </Container>
↓Code Editor
↓Code Editor
<Container gap={10} align={"center"} row> <Container> <Select size={"small"} placeholder={"Small"}> <option value={"dog"}>{"Dog"}</option> <option value={"cat"}>{"Cat"}</option> </Select> </Container> <Container> <Select size={"normal"} placeholder={"Default"} /> </Container> <Container> <Select size={"large"} placeholder={"Large"} /> </Container> </Container>
Sizes, Prefix and Suffix
<Container gap={10} align={"center"} row> <Container> <Select size={"small"} placeholder={"Small"} prefix={<RiArrowUpCircleLine />} suffix={<RiArrowUpCircleLine />} /> </Container> <Container> <Select size={"normal"} placeholder={"Default"} prefix={<RiArrowUpCircleLine />} suffix={<RiArrowUpCircleLine />} /> </Container> <Container> <Select size={"large"} placeholder={"Large"} prefix={<RiArrowUpCircleLine />} suffix={<RiArrowUpCircleLine />} /> </Container> </Container>
↓Code Editor
↓Code Editor
<Container gap={10} align={"center"} row> <Container> <Select size={"small"} placeholder={"Small"} prefix={<RiArrowUpCircleLine />} suffix={<RiArrowUpCircleLine />} /> </Container> <Container> <Select size={"normal"} placeholder={"Default"} prefix={<RiArrowUpCircleLine />} suffix={<RiArrowUpCircleLine />} /> </Container> <Container> <Select size={"large"} placeholder={"Large"} prefix={<RiArrowUpCircleLine />} suffix={<RiArrowUpCircleLine />} /> </Container> </Container>
Disabled
<Container row> <Select placeholder={"Disabled with placeholder"} disabled /> </Container>
↓Code Editor
↓Code Editor
<Container row> <Select placeholder={"Disabled with placeholder"} disabled /> </Container>
Prefix and suffix disabled
<Container row> <Select placeholder={"Default"} prefix={<RiArrowUpCircleLine />} disabled /> </Container>
↓Code Editor
↓Code Editor
<Container row> <Select placeholder={"Default"} prefix={<RiArrowUpCircleLine />} disabled /> </Container>
Label
<Container row> <Select placeholder={"With label"} label={"My label"} /> </Container>
↓Code Editor
↓Code Editor
<Container row> <Select placeholder={"With label"} label={"My label"} /> </Container>
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. |