export default function Example() {
  return (
    <>
      <Box
        css={{
          display: "flex",
          width: 500,
          rowGap: "$100",
          flexDirection: "column",
        }}
      >
        <Select.Root defaultValue="apple" open={true}>
          <Select.Trigger aria-label="example-3">
            <Select.Label>Label/Placeholder</Select.Label>
            <Select.Value />
          </Select.Trigger>
          <Select.Content>
            <Select.Group label="Fruit">
              <Select.Item value="apple">Apple</Select.Item>
              <Select.Item value="banana">Banana</Select.Item>
              <Select.Item value="orange">Orange</Select.Item>
            </Select.Group>
            <Select.Group label="Vegetable">
              <Select.Item value="broccoli">Broccoli</Select.Item>
              <Select.Item value="carrot">Carrot</Select.Item>
              <Select.Item value="onion">Onion</Select.Item>
            </Select.Group>
            <Select.Group label="Protein">
              <Select.Item value="fish">Fish</Select.Item>
              <Select.Item value="chicken">Chicken</Select.Item>
              <Select.Item value="beef">Beer</Select.Item>
            </Select.Group>
          </Select.Content>
        </Select.Root>
      </Box>
    </>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape