Search.mdx

import { Meta, Canvas, Controls, Primary } from '@storybook/blocks'; import { CssVariables } from '@doc-components'; import css from '@digdir/designsystemet-css/search.css?inline'; import * as SearchStories from './Search.stories';

Search

Slik bruker du Search

Du velger selv om du vil bruke Search.Clear og Search.Button. Vi anbefaler at du bruker Search.Clear for å gi brukeren mulighet til å fjerne søket. Dersom du ikke har Search.Button vil input feltet få et søkeikon.

ara-label eller aria-labelledby er påkrevd på Search.Input.

import { Search } from '@digdir/designsystemet-react';

<Search>
  <Search.Input aria-label="Sæk" />
  <Search.Clear />
  <Search.Button />
</Search.Clear>

Kontrollert

Varianter

Du kan endre variant på Button, eller ta den bort for å få forskjellige varianter.

Med Label

Dersom du vil ha label på søkefeltet, må du legge til en Label komponent som du kobler sammen med aria-labelledby på Search. I eksempelet har vi brukt Field for å få oppkobling mellom Label og Search.Input.

Skjema

Søkeknappen har typen "submit" og vil dermed automatisk sende inn skjema.

CSS Variabler

Referanser

• The ideal search box is 27 characters wide