Beskrivelse
Bruk og prinsipper er beskrevet i @fremtind/jkl-text-input
stil-pakken.
Kom i gang
Lær hvordan du kan ta i bruk Jøkul
Bruk av React-pakken
Installasjon
-
Installèr pakken med yarn add @fremtind/jkl-text-input-react
eller npm i @fremtind/jkl-text-input-react
. Stil-pakken blir automatisk installert som en avhengighet.
-
Importer både React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:
import { TextField, TextArea, ActionTextField, InlineTextField, BaseInputField } from "@fremtind/jkl-text-input-react";
import "@fremtind/jkl-text-input/text-input.min.css";
Generell Bruk
Du må spesifisere en label
for TextField
, TextArea
, ActionTextField
og InlineTextField
. Etiketten vil ikke vises for sistnevnte, men blir fortsatt tatt i bruk til skjermlesere.
Størrelsen på etiketten kan settes ved prop-en variant
, hvor størrelsene er definert ved "small" | "medium" | "large"
. Hvis komponentene skal brukes på mobile flater eller av andre årsaker trenger å være fremvist i sin kompakte variant må man ta i bruk forceCompact
.
Det er to måter å avgrense den fysiske størrelsen til inndata-feltet, enten ved å bruke width
eller maxLength
. maxLength
vil kun bestemme fysisk størrelse hvis width
ikke er definert, siden width
tar prioritet. Merk at maxLength
fortsatt vil bestemme hvor mange tegn som kan tastes inn i feltet.
if (width) {
return { width };
}
if (maxLength && maxLength < 15) {
return { width: `${maxLength + 3}ch` };
}
Komponentene tar imot hjelpe- og feilmeldinger gjennom helpLabel
og errorLabel
. Dersom errorLabel
finnes vises kun denne. Disse vil ikke vises for komponenten InlineTextField
og må fremvises på andre måter. Siden komponenten ikke har feil- og hjelpetekst brukes prop-en invalid
for å sette feiltilstand.
Handlingen/Ikonet som skal brukes på et ActionTextField
gis gjennom prop-en action
:
type action = {
icon: IconVariant,
label: string,
onClick: (event: MouseEvent) => void,
};
Særskilt bruk
BaseInputField
Denne er kun eksponert for å dekke spesielle behov og anbefales ikke å brukes.
Skal denne brukes frittstående må den akkompagneres av en Label
fra @fremtind/jkl-typography-react
hvor standAlone
og htmlFor
skal være spesifisert. Eksempel på hvordan denne kan brukes:
<Label standAlone htmlFor="complicatedquestion">
Lorem ipsum...
</Label>
<p className="description" id="longdescription">...dolor sit amet</p>
<BaseInputField id="complicatedquestion" ariaDescribedby="longdescription" />
<SupportLabel errorLabel={error && "Oida, her gikk noe galt!"}>