Gå til hovedinnhold
KOMPONENTER

Input group

Input Groups gir oss en universelt utformet måte å legge til label, variant-stiler og validering til skjemaelementer.

Du kan bruke bokstaver og tall
Gratulerer
Oisann, noe galt skjedde her
Pass på her

Komponenter

InputGroup

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

labelstring

Tekst/label over en form-komponent

labelTooltipstring

Tooltip for labelen

feedbackstring

Varselmelding, som vil komme under form-komponenten

variant"success" | "info" | "warning" | "error"

Hvilken variant varselmeldingen skal ha

childrenReactNode

En form-komponent

requiredboolean false

Om feltet er påkrevd

<InputGroup /> gir oss en universelt utformet måte å legge til label, validering og variant-stiler til skjemaelementer. Dropdown støtter ikke wrapping av InputGroup, så bruk heller f.eks. label-propen direkte fra Dropdown.

FeedbackText

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Teksten som vises

hideIconboolean

Skjuler ikonet

variant"success" | "info" | "warning" | "error"

Feedbackvarianten

classNamestring

Ekstra klassenavn

Av og til trenger man å lage sin egen versjon av en <InputGroup />. I de tilfellene kan det være greit å ha tilgang på byggeklossene som <InputGroup /> er satt sammen av!

Sjekk at eposten din er gyldig

<FeedbackText /> er teksten og ikonet som vises under et skjemaelement når det valideres.

VariantProvider og useVariant

<VariantProvider /> lar deg sende inn en variant, og hente den ut igjen med hooken useVariant(). Dette kan være praktisk når man skal lage sin egen versjon av en input group-komponent, og vil unngå å videresende varianten overalt.

const CustomInputGroup = props => (
  <VariantProvider variant={props.variant}>{props.children}</VariantProvider>
);

Retningslinjer for bruk

Varianter

Info om ledeteksten (Spørsmålstegn-ikon): En hjelpetekst som forklarer hva brukeren skal fylle inn bør alltid være synlig i ledeteksten der det er mulig. For kompleks hjelpetekst, kan du bruke et spørsmålstegn-ikon ved siden av ledeteksten. Ved å klikke på den, trigger brukeren opp en Tooltip med informasjonen. Du kan også vurdere å plassere hjelpeteksten ved siden av tekstfeltet

Inline hjelpetekst (Infomelding): Gir kontekst og ekstra veiledning om tekstfeltet, for hvordan det skal brukes. Teksten bør være kort og konsis og være synlig med en gang. Den kan for eksempel brukes for å informere brukeren om at tekstfeltet har en grense på max antall tegn man kan fylle inn.

Validering

Tekstfelt med feil validering (Feilmelding): Når brukerne gjør feil eller ikke har fylt ut det de skal riktig, må de forstå hva disse feilene er, slik at de kan rette dem og sende inn skjemaet på nytt. Et eksempel kan være hvis brukeren har oppgitt et telefonnummer som er feil. Feilmeldinger vises under tekstfeltet, og erstatter hjelpeteksten til den er løst.

Tekstfelt med suksess validering (Suksessmelding): Indikerer at detaljene brukeren har fylt inn i skjemaet er godkjent/vellykket.

Validering av felter skjer underveis i skjema, men først når man går ut av feltet. Hvis man ikke går inn i feltet vil validering først komme når man validerer siden.