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> </> ); }