Gå til hovedinnhold
KOMPONENTER

Input groups

Input groups brukes for å dekorere et skjemaelement med en label og feedback-tekst.

Gratulerer
Oisann, noe galt skjedde her
Pass på her
Denne informasjonen hjelper deg
Denne informasjonen hjelper deg

Komponenter

InputGroup

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

labelstring

Tekst/label over en form-komponent

feedbackstring

Varselmelding, som vil komme under form-komponenten

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

Hvilken variant varselmeldingen skal ha

childrenReactNode

En form-komponent

<InputGroup /> gir oss en universelt utformet måte å legge til label, validering og variant-stiler til skjemaelementer.

FeedbackText

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Teksten som vises

hideIconboolean

Skjuler ikonet

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

Feedbackvarianten

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>
);