Select

Skjemaelement for å velge mellom flere alternativer.

Eksempler

Størrelser

Velg blant small, medium og large.

<Stack gap="md">
  <Select label="Velg et språk" placeholder="Velg" size="small">
    <SelectItem value="no">Norsk</SelectItem>
    <SelectItem value="en">Engelsk</SelectItem>
    <SelectItem value="se">Svensk</SelectItem>
  </Select>
  <Select label="Velg et språk" placeholder="Velg" size="medium">
    <SelectItem value="no">Norsk</SelectItem>
    <SelectItem value="en">Engelsk</SelectItem>
    <SelectItem value="se">Svensk</SelectItem>
  </Select>
  <Select label="Velg et språk" placeholder="Velg" size="large">
    <SelectItem value="no">Norsk</SelectItem>
    <SelectItem value="en">Engelsk</SelectItem>
    <SelectItem value="se">Svensk</SelectItem>
  </Select>
</Stack>

Med ikon

Du kan legge til ikon.

<Select
  icon={<EnergyIcon />}
  label="Velg et språk"
  placeholder="Velg"
>
  <SelectItem value="no">Norsk</SelectItem>
  <SelectItem value="en">Engelsk</SelectItem>
  <SelectItem value="se">Svensk</SelectItem>
</Select>

Kontrollert

Du kan kontrollere komponenten med onValueChange og value.

function ControlledSelect () {
    const [selectedValue, setSelectedValue] = React.useState("");
  
    const handleValueChange = (value) => {
      setSelectedValue(value);
    };
  
    return (
      <Select
        label="Velg et språk"
        placeholder="Velg"
        onValueChange={handleValueChange}
        value={selectedValue}
      >
        <SelectItem value="1">Option 1</SelectItem>
        <SelectItem value="2">Option 2</SelectItem>
        <SelectItem value="3">Option 3</SelectItem>
        <SelectItem value="4">Option 4</SelectItem>
      </Select>
    )
  };

Med spinner

Ved isLoading skjules teksten visuelt, og det vises en spinner.

function LoadingSelect() {
  const [isLoading, setIsLoading] = React.useState(true);

  return (
  <Select aria-label={isLoading ? "Laster" : ""} disabled={isLoading} isLoading={isLoading} label="Velg språk" size="medium" placeholder="Velg" optionsPlacement="bottom">
    <SelectItem value="no">Norsk</SelectItem>
    <SelectItem value="en">Engelsk</SelectItem>
    <SelectItem value="se">Svensk</SelectItem>
  </Select>
  );
}

Vis kun ikon i Select-trigger

Som default vises den valgte verdien som children av SelectItem. Men om du ønsker å kontrollere hva som vises i Select-trigger, kan du bruke displayValue.

For å støtte UU, blir value under the hood også brukt som aria-label i Select-triggeren. value bør derfor ha et beskrivende navn, som å skrive verdi france istedenfor lang123.

function ControlledSelect() {
  const countries = { france: "🇫🇷", "united-kingdom": "🇬🇧", spain: "🇪🇸" };

  const [selectedValue, setSelectedValue] = React.useState("");

  const handleValueChange = (value) => {
    setSelectedValue(value);
  };

  return (
    <Select
      displayValue={selectedValue ? countries[selectedValue] : null}
      label="Velg et språk"
      onValueChange={handleValueChange}
      placeholder="Velg"
      value={selectedValue}
    >
      <SelectItem value="france">France</SelectItem>
      <SelectItem value="united-kingdom">UK</SelectItem>
      <SelectItem value="spain">Spain</SelectItem>
    </Select>
  );
}

Retningslinjer

Alltid sett label.

Kode

<Select />

import { Select } from "@aneo-org/design-react/clientComponents";

Element for å grupper SelectItems.

Prop	Type	Beskrivelse
label	`string`
hideLabel?	`boolean`	Skjuler label visuelt, men leses fortsatt opp for screenreaders.
placeholder?	`string`
optionsPlacement?	`"top" \| "bottom"`	Plassering av dropdownliste. "bottom" som standardverdi.
size?	`"small" \| "medium" \| "large"`

<SelectItem />

import { SelectItem } from "@aneo-org/design-react/clientComponents";

Element inne i Select.

Prop	Type	Beskrivelse
value?	`string`
children	`ReactNode`