Search

Et fs-input med plass til et forstørrelsesglass. Begge klassene settes, så alle tilstandene og variablene fra Input gjelder her også.

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/search/search.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/button/button.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/label/label.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/sr-only/sr-only.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<form class="fs-search-row" role="search">
<label class="fs-label fs-sr-only" for="sok">Søk i saker</label>
<input class="fs-input fs-search" type="search" id="sok" name="q" placeholder="Søk i saker" />
<button class="fs-button" type="submit">Søk</button>
</form>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/search.css"
import "@fristil/designsystem/button.css"
import "@fristil/designsystem/label.css"
import "@fristil/designsystem/sr-only.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<form className={fs.search.row} role="search">
  <label {...fs.label()} htmlFor="sok">Søk i saker</label>
  <input {...fs.search()} id="sok" />
</form>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const felt = document.querySelector<HTMLInputElement>("#sok")

fs.setAttributes(felt, fs.search())

fs.search() setter både fs-input og fs-search, og type="search". fs.search.row gir klassen på raden med feltet og knappen.

type="search" gir nettleserens eget kryss for å tømme feltet, og «Søk» i stedet for «Enter» på mobiltastaturet. Safari og Chrome tegner krysset ulikt, Firefox tegner det ikke i det hele tatt, og om Escape tømmer feltet varierer.

role="search" på skjemaet gjør at skjermlesere kan hoppe rett til søket på siden.

Ledeteksten kan ikke droppes

Plassholderen forsvinner idet brukeren skriver, og flere skjermlesere leser den ikke opp. Ser feltet så åpenbart ut som et søk at en synlig ledetekst blir støy, skjul den med .fs-sr-only framfor å la den være.

Søk mens brukeren skriver

<input class="fs-input fs-search" type="search" id="sok" name="q" />
<p class="fs-sr-only" role="status" id="treff"></p>

<script type="module">
  const felt = document.getElementById("sok")
  const status = document.getElementById("treff")
  let tidsavbrudd

  felt.addEventListener("input", () => {
    clearTimeout(tidsavbrudd)
    tidsavbrudd = setTimeout(async () => {
      const svar = await fetch(`/api/sok?q=${encodeURIComponent(felt.value)}`)
      const saker = await svar.json()

      tegnResultater(saker)
      status.textContent = `${saker.length} treff`
    }, 300)
  })
</script>

Ventetiden på 300 millisekunder er ikke bare for serveren. Uten den leses antall treff opp for hvert tastetrykk.

Klasser du kan style

Klasse	Hva det er
`.fs-search`	Søkefeltet. Brukes sammen med `.fs-input`.
`.fs-search-row`	Raden med feltet og knappen

Variabel	Standard
`--fs-search-icon-space`	`var(--fs-spacing-10)`
`--fs-search-icon-size`	`var(--fs-spacing-5)`

Ikonet kommer fra --fs-icon-search og snur med temaet. Se Tilpasning.

Tilgjengelighet

Meld antall treff i et felt med role="status". Uten det vet ikke den som hører siden om søket ga noe.
Ikke fjern nettleserens kryss uten å gi noe annet. Å tømme feltet for hånd er tungvint på mobil.
Er søket hovedfunksjonen på siden, la feltet ha fokus fra start. Er det ett av flere verktøy, la være: fokus som hopper er forvirrende.