Select

Select er nedtrekksmenyen med egendefinert dropdown-grensesnitt. Den tar en items-array og har sin egen SelectChangeEventHandler. En ny, forenklet variant — BETA_Select — er under utvikling og vil erstatte denne over tid.

Velg forsikring

Viktig informasjon

BETA_Select er den anbefalte veien videre. Se migreringsveiledningen nedenfor for å komme i gang.

Props

Props
Prop	Type	Påkrevd	Standard	Beskrivelse
`label`Egendefinert	`string`	Ja	—	Synlig label over nedtrekksmenyen.
`name`Egendefinert	`string`	Ja	—	Skjemafeltets navn — brukes av react-hook-form og native form submit.
`items`Egendefinert	`Array<string \| ValuePair>`	Ja	—	Liste over valgmuligheter. Bruk ValuePair ({ value, label }) for å skille mellom verdi og visningsnavn.
`value`Egendefinert	`string`	Nei	—	Valgt verdi (kontrollert).
`onChange`Egendefinert	`SelectChangeEventHandler`	Nei	—	Kalles med { type: 'change', target: { name, value } } ved valg. Kompatibel med react-hook-form.
`onBlur`Egendefinert	`SelectChangeEventHandler`	Nei	—	Kalles med { type: 'blur', target: { name, value } } når feltet mister fokus.
`errorLabel`Egendefinert	`string`	Nei	—	Feilmelding vist under feltet.
`helpLabel`Egendefinert	`string`	Nei	—	Hjelpetekst vist under feltet.
`defaultPrompt`Egendefinert	`string`	Nei	`"Velg"`	Plassholdertekst som vises når ingenting er valgt.
`searchable`Egendefinert	`boolean \| ((searchValue: string, item: string \| ValuePair) => boolean)`	Nei	`false`	Aktiverer søk i listen. Kan ta en egendefinert filtreringsfunksjon.
`maxShownOptions`Egendefinert	`number`	Nei	`5`	Antall valg synlig i listen før den scroller.
`inline`Egendefinert	`boolean`	Nei	`false`	Viser label og nedtrekksmeny på samme linje.
`width`Egendefinert	`string`	Nei	—	Setter bredden på nedtrekksmenyen (CSS-verdi).
`disabled`Native HTML	`boolean`	Nei	—	Deaktiverer feltet.

Eksempler

Grunnleggende nedtrekksmeny

Fylke

Med ValuePair og hjelpetekst

Bruk ValuePair-objekter når verdien og visningsnavnet skal være forskjellige.

Rolle

Velg rollen som best beskriver deg

Migrering

Disse eksemplene viser hvordan du erstatter utfasede props med den anbefalte API-en.

BETA_Select bruker native <option>-elementer som children i stedet for en items-array, og standard React onChange i stedet for SelectChangeEventHandler.

Finn denne koden

import { Select } from "@fremtind/jokul/select";

<Select
    label="Fylke"
    name="county"
    items={["Oslo", "Viken", "Innlandet", "Agder"]}
    value={value}
    onChange={({ target }) => setValue(target.value)}
/>

Endre importen fra Select til BETA_Select: import { BETA_Select as Select } from "@fremtind/jokul/select"
Fjern items-propen.
Legg til <option>-elementer som children. Bruk value-attributtet for å sette verdien.
Endre onChange til å bruke standard React ChangeEvent: onChange={(e) => setValue(e.target.value)}
Gi nytt navn til defaultPrompt → placeholder om du brukte det.
Merk: searchable og maxShownOptions er ikke tilgjengelig i BETA_Select ennå.

Erstatt med dette

import { BETA_Select as Select } from "@fremtind/jokul/select";

<Select
    label="Fylke"
    name="county"
    value={value}
    onChange={(e) => setValue(e.target.value)}
>
    <option value="oslo">Oslo</option>
    <option value="viken">Viken</option>
    <option value="innlandet">Innlandet</option>
    <option value="agder">Agder</option>
</Select>