Select

Input element displaying a list of predefined options in a dropdown, allowing selection of one.

Select 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.

Select is based on Chakra UI Select. See API-reference for Chakra UI Select.

Component usage

import { Box, Select } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box w="150px">
      <Select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </Select>
    </Box>
  );
}

Ghost variant

import { Box, Select } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box w="150px">
      <Select variant="ghost">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </Select>
    </Box>
  );
}