Gå til hovedinnhold
Entur logo – designsystemets starside

Vis som: Utvikler

Kom i GangIdentitetKomponenterTokensUniversell utforming
KOMPONENTER

Text field

npmv8.1.0

TextField en komponent for å ta imot tekst fra brukeren.

npm install @entur/form
@import '@entur/form/dist/styles.css';

TextField-props

Komponenter

TextField

import { TextField } from '@entur/form';
NavnTypeDefault-verdiBeskrivelse
prepend?ReactNode

Tekst eller ikon som kommer før inputfeltet

append?ReactNode

Tekst eller ikon som kommer etter inputfeltet

className?string

Ekstra klassenavn

labelReactNode

Label over TextField

labelTooltip?ReactNode

En tooltip som forklarer labelen til inputfeltet

labelTooltipButtonAriaLabel?string

Forklarende tekst for knappen som åpner labelTooltip

labelTooltipPlacement?Placement

Plasseringen til tooltip-en relativt til spørsmålstegn-knappen

feedback?string

Varselmelding, som vil komme under TextField

variant?"success" | "negative" | "warning" | "information"

Hvilken valideringsfarge som vises

disabled?boolean

Deaktiver inputfeltet

readOnly?boolean

Setter inputfeltet i read-only modus

size?"medium" | "large" "medium"

Størrelsen på TextField

disableLabelAnimation?boolean false

Plasserer labelen statisk på toppen av inputfeltet

labelProps?DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>

Ekstra props som sendes til label-elementet

clearable?boolean false

Om man skal ha muliget for å nullstille TextField. Viser lukkekryss hvis feltet er fylt.

onClear?(() => void)

Callback for clearable

ariaAlertOnFeedback?boolean

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 for bruk

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 areas.
Rediger denne siden på Bitbucket