Hopp til innhold

Checkbox

Vi bruker avmerkingsbokser når vi vil gi brukerne en liste med valg, der de kan velge ett eller flere alternativer. Vi bruker også enkeltstående avmerkingsbokser der brukere må bekrefte noe.

Kom i gang

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

Live demo

Checkbox
Egenskaper
Variant
Visning
Tema
Tetthet
const medHjelpetekst = false;
const medFeil = false;
const medTooltip = false;
const indeterminate = false;
return (
<FieldGroup
legend="Hvordan kan vi kontakte deg?"
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.</> }
: undefined
}
>
<Checkbox
name="checklist"
value="phone"
invalid={medFeil}
indeterminate={indeterminate}
>
Telefon
</Checkbox>
<Checkbox
name="checklist"
value="email"
invalid={medFeil}
indeterminate={indeterminate}
>
E-post
</Checkbox>
<Checkbox
name="checklist"
value="snailmail"
invalid={medFeil}
indeterminate={indeterminate}
>
Brev
</Checkbox>
</FieldGroup>
);

Enkeltstående checkbox

Enkeltstående checkbox
Egenskaper
Visning
Tema
Tetthet

React API

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