Textfield

const Preview = () => {
  return <Textfield label='Label' />;
};

render(<Preview />)

Bruk Textfield når

• du trenger et komplett skjemafelt med label, hjelpetekst og valideringsmelding
• feltet skal valideres underveis eller ved innsending
• verdien er unik og ikke kan velges fra en liste

Unngå Textfield når

• du trenger et helt enkelt inputfelt uten skjemalogikk, bruk heller Input
• brukeren skal velge fra et begrenset sett med alternativer, bruk heller Radio, Checkbox, Select eller Suggestion

Eksempel

Multiline

Du endrer til textarea ved å sette multiline til true. Da kan brukerne skrive lengre tekster.

const WithRows = () => {
  return <Textfield label='Label' multiline rows={4} />;
};

render(<WithRows />)

Med prefiks og suffiks

Prefixer og suffixer er nyttige for å vise enheter, valuta eller annen informasjon som er relevant for feltet. Disse skal ikke brukes uten <label>, da skjermlesere ikke leser dem opp. Det er viktig at samme informasjon som vises i prefixet eller suffixet, også inkluderes i ledeteksten.

const WithAffix = () => {
  return (
    <Textfield
      prefix='NOK'
      suffix='pr. mnd'
      label='Hvor mange kroner koster det per måned?'
    />
  );
};

render(<WithAffix />)

Med teller

Bruk counter til å informere om antall tegn brukerne kan skrive i feltet.

const WithCounter = () => {
  return (
    <Textfield counter={10} label='Hvor mange kroner koster det per måned?' />
  );
};

render(<WithCounter />)

Påkrevde og valgfrie felt

Det er lovpålagt å markere påkrevde felt. Les om obligatoriske og valgfrie felt for mer informasjon. Når du plasserer Tag i <label> anbefaler vi at du bruker margin-inline-start: var(--ds-size-2) for å skape avstand mellom teksten og taggen.

const Required = () => (
  <Textfield
    label={
      <>
        Hvor bor du?
        <Tag
          data-color='warning'
          style={{ marginInlineStart: 'var(--ds-size-2)' }}
        >
          Må fylles ut
        </Tag>
      </>
    }
    required
  />
);

render(<Required />)

Retningslinjer

Input er egnet til korte tekster og svar. Textarea er egnet til mer utfyllende og lengre svar.

Unngå plassholdertekster

Plassholdertekster (placeholder) forsvinner når brukerne skriver i feltet. Det er derfor bedre å inkludere hint og viktig informasjon i selve ledeteksten eller den tilhørende beskrivelsen. Kontrastkravene i WCAG gjelder for placeholder også, og da blir teksten så mørk at brukerne kan oppfatte textfield som utfylt.

Tilpass bredden på tekstfeltet

Tilpass bredden etter hva brukerne skal skrive inn, kort bredde for telefonnummer og bredere for stedsnavn. Ulik bredde på feltene gjør det lettere å navigere i skjemaer med mange felt.

Tillat kopier og lim inn

Brukere som skal fylle ut et tekstområde, trenger ofte å kopiere og lime inn informasjon, så denne funksjonen må ikke deaktiveres. Dette gjør det enkelt for brukerne å fylle inn nødvendige opplysninger uten begrensninger.

Inndata

For å sikre en god brukeropplevelse er det viktig å bruke en kombinasjon av riktig input-type og autocomplete-attributter. Les mer om autocomplete på MDN Webdocs.

• Tillat variasjoner i hvordan data skrives inn, så lenge informasjonen er forståelig. For eksempel bør telefonnumre kunne inneholde mellomrom, personnumre punktum, og e-postadresser aksepteres selv om de har et mellomrom til slutt.
• Pass på at brukerne ser inndata som formateres automatisk, men uten at det forstyrrer dem mens de fyller ut.

Formål med inndata

Autocomplete er påkrevd i felter der formålet finnes i den forhåndsdefinerte listen beskrevet i 1.3.5 formål med inndata (uutilsynet.no). Det hjelper nettlesere og hjelpemidler med å gjenkjenne og fylle ut personopplysninger automatisk.

• Bruk autocomplete bare når feltet samsvarer med den forhåndsdefinert listen som er gjengitt på UUtilsynets sider. (For eksempel given name, email eller address-line1)
• Hvis feltet gjelder en annen person en brukeren, skal du sette autocomplete="off". Dersom alle felt trenger autocomplete="off" kan du sette dette på et overordnet form-element. Alle input, select og textarea arver fra overordna form-element.

Input type

• Velg inputtyper som samsvarer med informasjonen du ber om, for eksempel tel, search eller email. Dette gir mobilbrukere et tilpasset tastatur, men vær oppmerksom på at enkelte inputtyper kan aktivere klientsidevalidering.
• Unngå type="number" med mindre du har brukerinnsikt som viser at det fungerer godt. Denne typen kan fjerne nuller, endre verdier ved scrolling, skape problemer for skjermlesere og runde lange tall. Bruk heller type="text" med inputmode="numeric" for bedre tilgjengelighet. Hvorfor Gov.uk endret input type for nummer (Gov.uk)

Tekst

Det skal alltid være ledetekst på Textfield.

• Hold ledeteksten kort, unngå at den går over to linjer
• Unngå å legge til beskrivelse som ikke er relevant eller meningsfull for brukeren
• Unngå å bruke kolon etter <label>