Hopp til innhold

Input­Group

Skjemafeltene våre har noen felles egenskaper. For å unngå duplisering av kode har vi laget en pakke for delte komponenter.

Kom i gang

Installer
npm i @fremtind/jkl-input-group-react
Bruk
import { InputGroup } from "@fremtind/jkl-input-group-react";
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-input-group/input-group.min.css";
import "@fremtind/jkl-tooltip/tooltip.min.css";
import "@fremtind/jkl-icons/icons.min.css";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

InputGroup
Egenskaper
Variant
Visning
Tema
Tetthet
const medHjelpetekst = false;
const medFeil = false;
const medTooltip = false;
return (
<InputGroup
label="Fødselsnummer"
labelProps={{ variant: 'small' }}
helpLabel={medHjelpetekst ? "Fødselsnummer består av 11 siffer" : undefined}
errorLabel={medFeil ? "Du må fylle ut fødselsnummer, 11 siffer" : undefined}
tooltipProps={
medTooltip
? {
content: (
<>
Du må fylle ut fødelsnummer eller D-nummer. Se{" "}
<a href="#">guiden vår</a> hvis du er usikker på hvordan Du
finner D-nummer.
</>
),
}
: undefined
}
>
<BaseTextInput />
</InputGroup>
);

React API

Her finner du en oversikt over props på komponentene i pakken.