Select

Unable to parse html

const Preview = () => {
  return (
    <Field>
      <Label>Velg et fjell</Label>
      <Select defaultValue=''>
        <Select.Option value='' disabled>
          Velg et fjell &hellip;
        </Select.Option>
        <Select.Option value='everest'>Mount Everest</Select.Option>
        <Select.Option value='aconcagua'>Aconcagua</Select.Option>
        <Select.Option value='denali'>Denali</Select.Option>
        <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option>
        <Select.Option value='elbrus'>Elbrus</Select.Option>
        <Select.Option value='vinson'>Mount Vinson</Select.Option>
        <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
        <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
      </Select>
    </Field>
  );
};

render(<Preview />)

Bruk select når

• du skal vise mange alternativer, og brukeren kun kan velge ett
• du trenger en kompakt måte å vise mange alternativer på

Unngå select når

• du har få valg og god plass, bruk heller radio
• du skal navigere mellom sider eller seksjoner i en applikasjon
• du skal velge flere alternativer. Selv om HTML select støtter dette via multiple-attributtet, er det lite brukervennlig, spesielt på mobil. Vi anbefaler checkbox eller suggestion for en mer oversiktlig og tilgjengelig løsning

Eksempel

Gruppering

Gruppering brukes for å organisere alternativer i kategorier, noe som gjør lange lister mer oversiktlige og enklere å navigere.

Unable to parse html

const WithOptgroup = () => {
  return (
    <Field>
      <Label>Velg en park</Label>
      <Select>
        <Select.Optgroup label='Grünerløkka'>
          <Select.Option value='sofienbergparken'>
            Sofienbergparken
          </Select.Option>
          <Select.Option value='birkelunden'>Birkelunden</Select.Option>
          <Select.Option value='olafryesplass'>Olaf Ryes plass</Select.Option>
        </Select.Optgroup>
        <Select.Optgroup label='Sentrum'>
          <Select.Option value='slottsparken'>Slottsparken</Select.Option>
          <Select.Option value='studenterlunden'>Studenterlunden</Select.Option>
        </Select.Optgroup>
        <Select.Optgroup label='Gamle Oslo'>
          <Select.Option value='botsparken'>Botsparken</Select.Option>
          <Select.Option value='klosterenga'>Klosterenga park</Select.Option>
        </Select.Optgroup>
      </Select>
    </Field>
  );
};

render(<WithOptgroup />)

Disabled

Unngå å deaktivere select hvis du kan. Det kan være vanskelig for brukerne å forstå hvorfor feltet ikke kan brukes. Les mer om hvorfor deaktiverte tilstander er problematiske (nav.no) og hvilke alternativer som finnes.

Unable to parse html

const Disabled = () => {
  return (
    <Field>
      <Label>Velg et fjell</Label>
      <Select disabled>
        <Select.Option value='blank'>Velg &hellip;</Select.Option>
        <Select.Option value='everest'>Mount Everest</Select.Option>
      </Select>
    </Field>
  );
};

render(<Disabled />)

ReadOnly

Bruk readOnly når du vil vise en forhåndsvalgt verdi i select, men ikke tillate at brukeren endrer valget. Dette kan være aktuelt når informasjonen er bestemt av systemet eller et tidligere steg i en prosess, og ikke skal kunne redigeres.

Unable to parse html

const ReadOnly = () => {
  return (
    <Field>
      <Label>Velg et fjell</Label>
      <Select aria-readonly value='everest'>
        <Select.Option value='everest'>Mount Everest</Select.Option>
      </Select>
    </Field>
  );
};

render(<ReadOnly />)

Retningslinjer

Bruk select når det er 7 eller flere alternativer. For færre alternativer kan alternativknapper (radio) være enklere for brukerne. Select er spesielt brukervennlig på mobil og gir god tilgjengelighet, da det følger operativsystemets standarder. Det fungerer godt når brukeren skal velge ett alternativ fra en liste. Hvis brukeren trenger å velge flere alternativer eller filtrere listen, bør du vurdere å bruke suggestion.

Sorter svaralternativene alfabetisk hvis det ikke er en god grunn til å gjøre noe annet. Vær forsiktig med å la det mest brukte svaralternativet stå først hvis det er et personlig spørsmål eller et verdispørsmål, som for eksempel religion eller partitilhørighet.

Merk: Gov.uk anbefaler å unngå select i offentlige digitale tjenester. Deres brukertester viser at brukere ofte synes komponenten er vanskelig å bruke riktig. Det kan være bedre å stille flere spørsmål for å redusere antallet alternativer å velge mellom. Hvis du stiller de riktige spørsmålene først, kan alternativknapper (radio) være et bedre valg.

Select skal alltid ha en ledetekst. Vi plasserer ledetekst og beskrivelse over feltet for å sikre god synlighet på små skjermer og unngå problemer ved feilmeldinger.

Hvis select er inne i en tabell og får ledeteksten fra tabelloverskriften, kan vi skjule ledeteksten. Pass likevel på at ledeteksten gir mening, siden den fortsatt skal leses opp av skjermlesere.

Tekst

Hold ledeteksten kort, helst på én linje.

Velg gjerne korte, etablerte formuleringer i stedet for spørsmål i ledeteksten hvis det er kjente kategorier for brukerne, som for eksempel «Velg avdeling» vs «Hvilken avdeling jobber du i?»

Vurder spørsmål eller mer beskrivende formuleringer når temaet og svaralternativene er mindre kjent for brukerne.

Svaralternativene skal være så korte som mulig, og hvert alternativ bør ha samme språklige form.