Documentation
Select

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
<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
<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
<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
<Container row>
  <Select placeholder={"Disabled with placeholder"} disabled />
</Container>

Prefix and suffix disabled

<Container row>
  <Select
    placeholder={"Default"}
    prefix={<RiArrowUpCircleLine />}
    disabled
  />
</Container>
Code Editor
<Container row>
  <Select
    placeholder={"Default"}
    prefix={<RiArrowUpCircleLine />}
    disabled
  />
</Container>

Label

<Container row>
  <Select placeholder={"With label"} label={"My label"} />
</Container>
Code Editor
<Container row>
  <Select placeholder={"With label"} label={"My label"} />
</Container>

Props

NameTypeDefaultRequiredDescription
size"small" | "normal" | "large""normal"NoThe size of the select dropdown.
labelstringundefinedNoThe label displayed above the select dropdown.
placeholderstringundefinedNoThe placeholder text shown in the dropdown before any option is selected.
prefixJSX.Element | stringundefinedNoAn element or text to display before the dropdown selector.
suffixJSX.Element | stringArrow IconNoAn element or text to display after the dropdown selector. By default, an arrow icon is used.
disabledbooleanfalseNoIf true, disables the select input.