TextField en komponent for å ta imot tekst fra brukeren.
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