InfoSelect

<InfoSelect label="Choose transportation">
  <Item>Train</Item>
  <Item>Bus</Item>
  <Item>Boat</Item>
</InfoSelect>

<InfoSelect 
  label="Choose transportation"
  items={[
    { key: 1, label: "Train" },
    { key: 2, label: "Bus" },
    { key: 3, label: "Boat" }
  ]}
>
  {(item) => <Item>{item.label}</Item>}
</InfoSelect>

<InfoSelect 
  label="What is the best way to travel"
  items={[
    { key: 1, label: "Train", description: "Tøff tøff tøff" }, 
    { key: 2, label: "Bus", description: "Brom brom brom" }, 
    { key: 3, label: "Fly", description: "Fly fly fly" }, 
  ]}
>
  {(item) => (
    <Item textValue={item.label}>
      <ItemLabel>{item.label}</ItemLabel>
      <ItemDescription>{item.description}</ItemDescription>
    </Item>
  )}
 </InfoSelect>

<InfoSelect 
  label="How do you trabel?"
  items={[
    { id: 1, icon: TrainOutline24Icon, title: 'Train' },
    { id: 2, icon: AirplaneOutline24Icon, title: 'Plane' },
    { id: 3, icon: ScooterOutline24Icon, title: 'Scooter' }
  ]}
>
  {item => (
    <Item textValue={item.title}>
      <Flex>
        <item.icon aria-hidden="true" marginRight={1} />
        <ItemLabel>{item.title}</ItemLabel>
      </Flex>
    </Item>
  )}
</InfoSelect>

() => {
  const [color, setColor] = React.useState("darkTeal");
  return (
    <Box>
      <SmileOutline30Icon color={color} />
      <InfoSelect 
        label="Icon color" 
        onChange={newColor => setColor(newColor)}
        selectedKey={color}
        width={["100%", "50%"]}
      >
        <Item key="darkTeal">Dark Teal</Item>
        <Item key="primaryGreen">Primary Green</Item>
        <Item key="greenHaze">Green Haze</Item>
      </InfoSelect>
    </Box>
  );
}

<Stack gap={3}>
  <InfoSelect 
    label="Base"
    items={[
      { key: 1, label: "Train" },
      { key: 2, label: "Bus" },
      { key: 3, label: "Boat" }
    ]}
  >
    {(item) => <Item>{item.label}</Item>}
  </InfoSelect>
  <InfoSelect 
    label="Floationg"
    variant="floating"
    items={[
      { key: 1, label: "Train" },
      { key: 2, label: "Bus" },
      { key: 3, label: "Boat" }
    ]}
  >
    {(item) => <Item>{item.label}</Item>}
  </InfoSelect>
</Stack>

<InfoSelect isLabelSrOnly={true} label="Velg en farge">
  <Item>Grønn</Item>
  <Item>Gul</Item>
  <Item>Oransje</Item>
</InfoSelect>