Components

Info Select

Info Selects er nedtrekkslister med egendesignede valg.

Examples

En enkel InfoSelect

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

Når man har en liste med items (og ikke vil hardkode, som over)

<InfoSelect 
  label="Hva er din favorittfarge?"
  items={[
    { key: 1, label: "Grønn" },
    { key: 2, label: "Gul" },
    { key: 3, label: "Oransje" }
  ]}
>
  {(item) => <Item>{item.label}</Item>}
</InfoSelect>

Items med label og beskrivelse

<InfoSelect 
  label="Hva er den beste måten å reise på?"
  items={[
    { key: 1, label: "Tog", description: "Tøff tøff tøff" }, 
    { key: 2, label: "Buss", 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 med ikoner og tekst

<InfoSelect 
  label="Hva vil du reise med?"
  items={[
    { id: 1, icon: TrainOutline24Icon, title: 'Tog' },
    { id: 2, icon: AirplaneOutline24Icon, title: 'Fly' },
    { id: 3, icon: ScooterOutline24Icon, title: 'Sparkesykkel' }
  ]}
>
  {item => (
    <Item textValue={item.title}>
      <Flex>
        <item.icon aria-hidden="true" marginRight={1} />
        <ItemLabel>{item.title}</ItemLabel>
      </Flex>
    </Item>
  )}
</InfoSelect>

Kontrollert state:

() => {
  const [color, setColor] = React.useState("darkTeal");
  return (
    <Box>
      <SmileOutline30Icon color={color} />
      <InfoSelect 
        label="Ikonfarge" 
        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>
  );
}

Info label only for screen reader:

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