Designsystemoversikt

Select

Select brukes når brukeren skal velge én verdi fra en kjent liste, og den native varianten er nok.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Denne lokale siden fokuserer på `NativeSelect`, altså Jøkul sin wrapper rundt vanlig `<select>`. Det er ofte det riktige valget når listen er kort og ikke trenger søk eller ekstra interaksjonslag.

Forhåndsvisningen under bruker den samme input-group- og wrapperkontrakten som Jøkul selv: `jkl-select`, `jkl-input-group` og `jkl-select__button` rundt feltet.

Playgrounden viser hvordan placeholder, bredde, feilstatus og valgt verdi påvirker både markupen og React-eksempelet.

Eksempel

Props

    • inline=false · invalid=false · disabled=false · width="auto" · placeholder="Velg fase" · value="empty"

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import "@fremtind/jokul/styles/components/input-group/input-group.min.css";
import "@fremtind/jokul/styles/components/select/select.min.css";
import { NativeSelect } from "@fremtind/jokul/select";

const items = [
    "Planlegging",
    "Implementering",
    "Publisert",
];

export function Example() {
    return (
        <NativeSelect
            label="Fase"
            name="stage"
            items={items}
            placeholder="Velg fase"
        />
    );
}

    Hendelser

    Ingen hendelser fra select-eksempelet ennå.

    Props

    Jøkul-props

    Jøkul-props som styrer wrapper, tilstand og førstevalget i den native selecten.

    Prop Type Standard Beskrivelse
    inline boolean false Lar selecten stå i kompakte linjer der labelen skjules visuelt, men fortsatt finnes for skjermlesere.
    invalid boolean false Markerer feltet som ugyldig og brukes sammen med en forklarende feilmelding.
    width string auto Lar deg styre bredden på outer wrapper når selecten trenger en tydelig fast bredde i layouten.
    placeholder string "Velg" Teksten som vises før brukeren har valgt noe i den native listen.

    React-props

    Props på `NativeSelect` og InputGroup rundt feltet.

    Prop Type Standard Beskrivelse
    data-testautoid string ingen Stabil test-id fra Jøkul sin kjernetype når selecten må spores i automatiserte tester.
    id string auto-generert når mulig Lar deg styre koblingen mellom label, support-tekst og det underliggende select-elementet eksplisitt.
    label ReactNode påkrevd Labelteksten som beskriver hva listen gjelder.
    items Array<string | ValuePair> påkrevd Alternativene som vises i selecten.
    className string ingen Ekstra klasse på wrapperen når selecten må kobles til lokal layout eller sporing.
    data-testid string ingen Testkrok på wrapperen når teamet bruker `data-testid` i komponenttester.
    data-size "small" | "medium" | "large" arver størrelse Lar feltet følge en eksplisitt størrelseskontrakt når layouten trenger det.
    labelProps Omit<LabelProps, "children" | "htmlFor" | "standAlone"> ingen Justerer label-varianten eller skjuler den visuelt uten å miste koblingen til feltet.
    supportLabelProps Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel"> ingen Styrer hvordan hjelp- eller feilmeldingen under feltet rendres.
    description ReactNode ingen Ekstra beskrivelsetekst mellom label og felt når brukeren trenger mer kontekst før et valg tas.
    tooltip ReactNode ingen Knytter en ekstra forklaring til labelen uten å gjøre den synlige hjelpeteksten permanent.
    style CSSProperties ingen inline-stiler Lar wrapperen få inline-stiler når layouten må styres programmatisk i en avgrenset kontekst.
    render (props: InputProps) => JSX.Element ingen custom render Avansert escape hatch når InputGroup-familien må rendres via en egendefinert funksjon.
    helpLabel ReactNode ingen Hjelpetekst under feltet når brukeren trenger ekstra føring før et valg tas.
    errorLabel ReactNode ingen Feilmelding under feltet når selecten er ugyldig eller mangler et påkrevd valg.

    Native HTML-props

    Native HTML-attributter som sendes til det underliggende `<select>`-elementet.

    Prop Type Standard Beskrivelse
    value string tom streng Den valgte verdien når selecten brukes kontrollert.
    name string påkrevd Feltets navn i skjemaer og ved innsending.
    disabled boolean false Brukes når brukeren midlertidig ikke skal kunne velge i listen.
    required boolean false Markerer at brukeren må velge en verdi før skjemaet kan sendes inn.
    selectClassName string ingen Ekstra klasse på det underliggende `<select>`-elementet når bare selve feltknappen må styles eller spores.

    ARIA-props

    Tilgjengelighetsattributter som knytter selecten til støttetekst og feilstatus.

    Prop Type Standard Beskrivelse
    aria-describedby string ingen Kobler selecten til hjelpetekst eller feilmelding under feltet.
    aria-invalid boolean false Bør settes når feltet er ugyldig og samtidig peke til en konkret feilmelding.

    Når du skal bruke Select

    Bruk Select når brukeren skal velge én verdi fra en kjent, relativt kort liste, og det er nyttig å holde alle valgene samlet i ett felt.

    Hvis listen er svært kort og valgene bør være synlige samtidig, kan radio buttons være lettere å sammenligne.

    Tilgjengelighet

    Native select arver mye tilgjengelighet fra nettleseren, men label, hjelpetekst og feilmelding må fortsatt være presise og koblet riktig.

    Når feltet er ugyldig, bør feilmeldingen forklare hvorfor brukeren må velge noe eller hva som er feil med det valget som er tatt.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Påkrevd
    Dekket API-props
    20
    Playground-kontroller
    6
    Delkomponenter
    0
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/input-group/input-group.min.css
    • @fremtind/jokul/styles/components/select/select.min.css
    • @fremtind/jokul/styles/components/icon/icon.min.css
    • @fremtind/jokul/styles/fonts/webfonts.min.css

    Ikonkontrakt

    Bruk: Påkrevd

    Stilimport: @fremtind/jokul/styles/components/icon/icon.min.css

    Fontimport: @fremtind/jokul/styles/fonts/webfonts.min.css

    • Select-kontrakten bruker Jøkul sitt chevron-ikon som en del av affordancen i feltet, så ikonoppsettet er ikke valgfritt for full visuell kontrakt.
    • Feil- og støttetilstander i samme feltfamilie deler også ikonstilen, så komponenten bør dokumenteres og installeres med ikonimporten på plass.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Select · NativeSelectProps · @fremtind/jokul/select · 20 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.
    • Denne siden dokumenterer den native Select-varianten som rendres fra `NativeSelect` i `@fremtind/jokul/select`.

    Tilgjengelighet

    Tastatur: Følger native tastaturstøtte for select; Tab flytter fokus og piltaster blar i alternativene når menyen er åpen.

    Semantikk som kreves

    • Select trenger en tydelig label. Placeholderen kan hjelpe, men skal ikke erstatte labelen.
    • Bruk select når alternativene er kjente og brukeren skal velge én verdi fra listen.
    • Feilstatus må forklares med tekst, ikke bare visuell markering av feltet.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at alternativene er formulert tydelig nok til å forstås uten ekstra kontekst.
    • Bekreft at placeholder og valgt verdi ikke blir forvekslet på små skjermer.

    Ytelse

    • Den lokale docs-siden bruker NativeSelect-markup og holder seg til browserens innebygde select-oppførsel.
    • Hold antall alternativer lavt nok til at brukeren faktisk får oversikt uten søk eller ekstra klientlogikk.

    Relatert