Select

ReactSass

Vi bruker nedtrekkslister til å gi brukeren en liste med alternativ. Nedtrekkslister passer i de tilfellene det er for mange valg til å bruke radioknapper. Nedtrekkslisten må ha en overskrift, som forteller hva det er brukerne kan velge mellom i listen.

<Select
    ref={selectRef}
    id="produsent"
    name="produsent"
    forceCompact={false}
    variant="small"
    label="Hvilket merke er telefonen?"
    helpLabel={undefined}
    errorLabel={undefined}
    items={[
        { value: "apple", label: "Apple" },
        { value: "samsung", label: "Samsung" },
        { value: "google", label: "Google og utvalgte partnere" },
        { value: "LG", label: "LG" },
    ]}
    value={value}
    onChange={setValue}
    searchable={false}
    onFocus={onFocus}
    onBlur={onBlur}
/>

Om du har fem eller færre valg kan det være bedre å bruke Radio buttons.

Hvis du trenger en nedtrekksliste med mange valg, kan du også legge inn en søke- eller filtreringsfunksjon. Dersom brukeren alltid må scrolle i listen over valg er det kanskje på tide å la de søke.

Du finner et eksempel på en nedtrekksliste brukt i skjemakontekst under Profil og Skjemadesign. Koden til eksempelet finner du på GitHub.

Tekst og validering

Bruk prinsippene for skjemadesign til å velge størrelse på overskriften til listen. Lag en kort og tydelig tekst, som forteller hva det er brukeren skal gjøre i nedtrekkslisten. Hvis det trengs, kan du legge en hjelpetekst under listen for å forklare mer.

Hvis nedtrekkslisten ikke validerer, viser systemet en feilmelding som forklarer hva som er galt. Feilmeldingen erstatter en eventuell hjelpetekst, så den må eventuelt gjenta informasjonen fra hjelpeteksten.

For eksempel, gitt en hjelpetekst "Velg landet du var på ferie i da du ble syk" kan vi ha en feilmelding "Du må velge hvor du var på ferie da du ble syk".

Når bruker vi Select?

Vi bruker en nedtrekksliste når vi skal gi brukeren en liste med alternativ, og hvor Radio buttons ikke passer. Noen eksempler på bruk er:

• Til å velge årsak eller skadetype
• Til å velge diagnose
• Til å velge stilling

En nedtrekksliste med søk har noen likhetstrekk med Autosuggest. En nyanseforskjell er at en nedtrekksliste ikke lar brukeren velge noe annet enn de forhåndsbestemte alternativene. Om du ønsker at brukerens søk skal være et gyldig valg uansett, bruk Autosuggest.

Eksempler på bruk

To Select i et skjema. Klikk for å se større.