Notwithstanding Previous Misdemeanors

    @chakra-ui/select
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.6 • Public • Published

    Select

    The Select component is a component that allows users pick a value from predefined options.

    Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.

    Installation

    yarn add @chakra-ui/select
    
    # or
    
    npm i @chakra-ui/select

    Import component

    import { Select } from "@chakra-ui/select"

    Usage

    <Select placeholder="A simple select component">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Select>

    States

    Disabled

    Pass the isDisabled prop to put the select component in an invalid state

    <Select placeholder="Select option" isDisabled>
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </Select>

    Invalid

    Pass the isInvalid prop to put the select component in an invalid state

    <Select placeholder="Select option" isInvalid>
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </Select>

    Variants

    Control the visual appearance of the select component by passing the variant prop.

    The following values are allowed: outline, filled, flushed, unstyled

    <Stack>
      <Select placeholder="Select option" variant="outline">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </Select>
    
      <Select placeholder="Select option" variant="filled">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </Select>
    
      <Select placeholder="Select option" variant="flushed">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </Select>
    
      <Select placeholder="Select option" variant="unstyled">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </Select>
    </Stack>

    Sizes

    Pass the size prop to change the size and height of the select component.

    The following values are allowed: sm, md, lg

    <Stack spacing={4}>
      {["sm", "md", "lg"].map((size) => (
        <Select key={size} placeholder="Select option" size={size}>
          <option value="Option 1">Option 1</option>
          <option value="Option 2">Option 2</option>
          <option value="Option 3">Option 3</option>
        </Select>
      ))}
    </Stack>

    Controlled Select

    const ControlledSelectExample = () => {
      const [value, setValue] = React.useState("")
      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValue(event.target.value)
      }
    
      return (
        <Select
          value={value}
          onChange={handleChange}
          placeholder="Controlled select"
        >
          <option value="Option 1">Option 1</option>
          <option value="Option 2">Option 2</option>
          <option value="Option 3">Option 3</option>
        </Select>
      )
    }

    Changing the icon in the Select

    Pass the icon prop to change the arrow icon of the select component to a custom icon.

    You also have access to the iconSize prop to change the size of the custom arrow icon.

    const CustomSelectIconExample = () => {
      const SelectIcon = () => (
        <Icon viewBox="0 0 24 24">
          <path
            fill="currentColor"
            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
          />
        </Icon>
      )
      return <Select icon={SelectIcon} placeholder="Placeholder" size="md" />
    }

    Focus border color and error border color

    Pass the focusBorderColor prop to change the border color of the select component in the focused state.

    Pass the errorBorderColor prop to change the border color of the select component in the invalid state.

    The value of these props can be set to a color in the theme object, or a raw CSS value.

    <Stack>
      <Select focusBorderColor="lime" placeholder="Here is a sample placeholder" />
    
      <Select
        isInvalid
        errorBorderColor="crimson"
        placeholder="Here is a sample placeholder"
      />
    </Stack>

    Overriding the Select styles

    Even though the select comes with predefined styles, you can override pretty much any property. Here's we'll override the background color.

    <Select
      color="white"
      borderColor="tomato"
      backgroundColor="tomato"
      placeholder="Woohoo! A new background color!"
    />

    Install

    npm i @chakra-ui/select

    DownloadsWeekly Downloads

    331,173

    Version

    2.0.6

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    6

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828