jkl-field-group-react 6.0.0
Install from the command line:
Learn more about npm packages
$ npm install @fremtind/jkl-field-group-react@6.0.0
Install via package.json:
"@fremtind/jkl-field-group-react": "6.0.0"
About this version
Se portalen for bruk og prinsipper.
Lær hvordan du kan ta i bruk Jøkul
- Installér pakken med
yarn add @fremtind/jkl-field-group-reactellernpm i @fremtind/jkl-field-group-react. Stil-pakken blir automatisk installert som en avhengighet. - Importér både React-pakken og stil-pakken i prosjektet ditt:
import { FieldGroup } from "@fremtind/jkl-field-group-react";
import "@fremtind/jkl-field-group/field-group.min.css";Komponenten legges rundt feltene du ønsker å gruppere, og overskriften i grupperingen angis med legend.
<FieldGroup legend="Personlig informasjon">
<TextInput variant="small" label="Fornavn" />
<TextInput variant="small" label="Etternavn" />
<TextInput type="number" variant="small" label="Fødselsnummer" />
</FieldGroup>Komponenten tar imot hjelpe- og feilmeldinger gjennom helpLabel og errorLabel. Dersom errorLabel finnes vises kun denne. Du må selv håndtere eventuelle feilmeldinger på feltene inne i gruppen.
const hasError = someValidityCheck();
<FieldGroup errorLabel={hasError ? "Rett opp feilen" : undefined} helpLabel="Hjelp til utfylling her">
{/* ... */}
</FieldGroup>;