Gå til hovedinnhold

TextField-props

Varianter

TextField

TextField er en stylet wrapper for et <input>-element. Dette innebærer at eventuelle props du ønsker bruke fra det grunnleggende HTML-elementet blir videresendt.

Les mer om disse her: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes

Retningslinjer

Tekstfelt lar brukerne legge inn og redigere tekst i et brukergrensesnitt. Tekstfelt brukes normalt i et skjema, man kan også være del av for eksempel modal eller søk. Bør benyttes med en kort og tydelig ledetekst som forklarer hva brukeren skal oppgi i feltet. Hvis det er nødvendig med mer veiledning for å hjelpe brukerens utfylling av skjemaet, kan du legge til hint, hjelpetekst og validering. Anbefalt bredde på tekstfelt bør ikke overstige 500px.

For tekst som går over flere linjer, bruk heller Text area.

Tilgjengelighet

feedback vises i en live region med role="status", slik at skjermlesere leser opp meldingen når den kommer. Du trenger derfor ikke legge til en egen aria-live-region rundt feltet. Det gir dobbel opplesing.

Ikonet ved siden av meldingen er skjult for skjermlesere. Teksten må derfor være selvforklarende og tydelig formidle om det er en feilmelding eller et varsel.

Du kan styre opplesingen med ariaAlertOnFeedback. Standardverdien 'status' gir en høflig opplesing, 'alert' avbryter skjermleseren umiddelbart – bruk den bare til meldinger som hindrer brukeren i å komme videre – og false skrur av opplesingen helt. Med feedbackProps kan du sette egne role- og aria-live-verdier på feedback-teksten.

Props

TextField

import { TextField } from '@entur/form';

Denne komponenten har ingen props