Search

const Preview = () => {
  return (
    <Search>
      <Search.Input aria-label='Søk' />
      <Search.Clear />
      <Search.Button />
    </Search>
  );
};

render(<Preview />)

Bruk Search når

• brukerne trenger hjelp med å finne relevant informasjon raskt på et nettsted eller i en applikasjon
• situasjoner der brukerne skriver nøkkelord eller setninger for å finne mest relevant innhold oppstår

Unngå Search når

• innholdet er lett å navigere uten søk
• det er en erstatning for god navigasjon. Søk skal være et supplement, ikke eneste navigasjonsmetode

Eksempel

Varianter

Du kan endre variant på Button for å tilpasse visningen. Alternativt kan du fjerne knappen for å bruke et søkefelt med ikon. Eksemplene nedenfor viser varianter som inkluderer ikon, primær- og sekundærknapp.

const Variants = () => {
  return (
    <>
      <Search>
        <Search.Input aria-label='Søk' />
        <Search.Clear />
      </Search>

      <Divider style={{ marginTop: 'var(--ds-size-4)' }} />

      <Search>
        <Search.Input aria-label='Søk' />
        <Search.Clear />
        <Search.Button />
      </Search>

      <Divider style={{ marginTop: 'var(--ds-size-4)' }} />

      <Search>
        <Search.Input aria-label='Søk' />
        <Search.Clear />
        <Search.Button variant='secondary' />
      </Search>
    </>
  );
};

render(<Variants />)

Retningslinjer

Bredden på søkefeltet bør tilsvare lengden på søkeordene brukerne vanligvis skriver inn. Størrelsen på feltet er et viktig signal om hva de kan skrive inn. For eksempel bør et søkefelt for personnumre ha en bredde som tilsvarer et personnummer. Hovedsøkefeltet for et nettsted bør være bredere, slik at brukerne kan se flere ord samtidig. For å unngå at brukerne må scrolle i søkefeltet må vi unngå søkefelt som er så korte at deler av innholdet ikke synes.

Tekst

Placeholder-tekst bør brukes med forsiktighet, da den forsvinner når brukeren skriver og kan skape forvirring. Den må også oppfylle kontrastkrav for tilgjengelighet, noe som kan gjøre teksten vanskelig å skille fra utfylt innhold. Skjermlesere håndterer placeholder-tekst ulikt, så informasjonen bør heller gis via Label eller beskrivelse.

Du bør bruke en label over søkefeltet når det ikke er åpenbart hva brukeren skal søke etter, eller når søkefeltet er en del av et skjema.

const WithLabel = () => {
  return (
    <Field>
      <Label>Søk etter katter</Label>
      <Search>
        <Search.Input name='cat-search' />
        <Search.Clear />
        <Search.Button />
      </Search>
    </Field>
  );
};

render(<WithLabel />)