Select

Samme utseende og tilstander som Input, på et ekte <select>. Da brukes nettleserens egen liste, den som allerede virker med tastatur, skjermleser og mobilens innebygde velger.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/select.css"

Tilstander

Eksempel

Kode

<label class="fs-label" for="fylke">Fylke</label>
<select class="fs-select" id="fylke" name="fylke">
<option value="">Velg fylke</option>
<option>Innlandet</option>
<option selected>Vestland</option>
<option>Troms</option>
</select>

<label class="fs-label" for="kommune">Kommune</label>
<select class="fs-select" id="kommune" data-state="invalid" aria-invalid="true">
<option value="" selected>Velg kommune</option>
</select>

<label class="fs-label" for="registrert">Registrert fylke</label>
<select class="fs-select" id="registrert" disabled>
<option selected>Vestland</option>
</select>

data-state	Brukes til
(utelatt)	Normaltilstand
invalid	Valideringen har feilet
success	Valget er bekreftet gyldig. Bruk sparsomt.

Den første <option> bør ha tom value når feltet er påkrevd. Da stopper required faktisk innsending til brukeren har valgt noe.

Listen tegnet i siden

Selve listen som spretter opp er normalt et vindu fra operativsystemet, og ingen CSS når inn i den. Med data-picker="styled" ber feltet nettleseren tegne listen inne i siden i stedet, slik at den får systemets farger, avstander og skygge.

Eksempel

Kode

<label class="fs-label" for="sak">Sakstype</label>
<select class="fs-select" data-picker="styled" id="sak" name="sak">
<option value="">Velg sakstype</option>
<option value="byggesak" selected>Byggesak</option>
<option value="deling">Deling av eiendom</option>
<option value="utslipp">Utslippstillatelse</option>
</select>

Dette er den samme <select>-en som før. Den sendes inn med skjemaet, leses av skjermlesere og virker med tastatur på nøyaktig samme måte, og markupen er uendret bortsett fra attributtet.

Grupper laget med <optgroup label="…"> får overskriften i mindre og dempet tekst, så den skiller seg fra valgene.

Støtten er ulik mellom nettleserne, og det er grunnen til at dette må slås på:

Nettleser	Hva brukeren ser
Chrome, Edge, Safari 26	Listen tegnes i siden, med Fristils farger
Firefox	Nettleserens egen liste, som uten attributtet

Firefox får altså ingen ny funksjonalitet, men heller ingenting som ser ødelagt ut. Skal alle brukere se det samme, la attributtet være.

I høykontrastmodus faller feltet tilbake til nettleserens egen liste i alle nettlesere. Systemfargene er de eneste som er garantert lesbare der.

import { fs } from "@fristil/designsystem"

fs.select({ picker: "styled" })
// { class: "fs-select", "data-picker": "styled" }

TypeScript

import { fs, type FieldState } from "@fristil/designsystem"

const felt = document.querySelector<HTMLSelectElement>("#fylke")

felt.addEventListener("change", () => {
  const tilstand: FieldState = felt.value === "" ? "invalid" : "default"

  fs.setAttributes(felt, fs.select({ state: tilstand, picker: "styled" }))
})

state er samme type som i Input og Textarea. Går feltet tilbake til "default", fjerner fs.setAttributes både data-state og aria-invalid.

Hvert kall setter hele tilstanden. Utelater du picker, fjernes data-picker på samme måte som data-state, så send med de valgene feltet skal beholde.

Klasser du kan style

Klasse	Hva det er
.fs-select	Nedtrekkslisten. Tilstanden kommer fra data-state, listen fra data-picker.

Variabel	Standard	Gjelder
--fs-select-radius	var(--size-1)	Feltet, og listen som tegnes i siden
--fs-select-option-padding	var(--size-2) var(--size-3)	Ett valg i listen som tegnes i siden
--fs-select-viewport-margin	var(--size-2)	Luft mellom listen og kanten av vinduet

Pilen er to gradienter i bakgrunnen, tegnet i --semantic-muted-foreground, så den snur med temaet. Skal den bort, sett background-image: none. Med data-picker="styled" tegner nettleseren pilen selv, og den styles med ::picker-icon.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• En <option> som sier «Velg fylke» er en ledetekst i forkledning, ikke en erstatning for <label>.
• Har listen flere enn rundt sju valg som hører logisk sammen, grupper dem med <optgroup label="…">.
• Ikke send skjemaet automatisk ved endring. Tastaturbrukere blar gjennom valgene med piltastene og ville sendt skjemaet på det første de passerer.
• Trenger du søk, flervalg eller ikoner i listen, er <select> feil verktøy. Bygg det som en frittstående komponent framfor å style om dette elementet.