Hopp til innhold

Text­Input

Når vi vil at brukerne skal legge inn tekst eller tall på en strukturert måte.

EksemplerBrukTekstDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-text-input-react
Bruk
import { TextInput, TextAera } from "@fremtind/jkl-text-input-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-input-group/input-group.min.css";

import "@fremtind/jkl-text-input/text-input.min.css";



// For enkelte features må du også ha denne CSSen importert.

import "@fremtind/jkl-icon-button/icon-button.min.css";

import "@fremtind/jkl-icons/icons.min.css";

import "@fremtind/jkl-tooltip/tooltip.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-input-group/input-group";

@use "@fremtind/jkl-text-input/text-input";



@use "@fremtind/jkl-icon-button/icon-button";

@use "@fremtind/jkl-icons/icons";

@use "@fremtind/jkl-tooltip/tooltip";
React
Versjon
Dokumentasjon
Readme
Changelog
Migration

Live demo

TextInput
Egenskaper
Variant
Visning
Tema
Tetthet
<TextInput

  label="Boareal"

  name="boareal"

  align="right"

  labelProps={{ variant: '' }}

  helpLabel={

    false

      ? "Boareal er innvendig bruksareal unntatt bodarealet"

      : undefined

  }

  errorLabel={

    false ? (

      <>

        Du må fylle ut boarealet. Se{" "}

        <a className="jkl-link" href="#">

          guiden vår

        </a>{" "}

        hvis du er usikker på hvordan du finner riktig areal.

      </>

    ) : undefined

  }

  tooltipProps={

    false

      ? {

          content: (

            <>

              Boareal måles i kvadratmeter (m<sup>2</sup>). Hvis du ikke vet

              boarealet ditt kan du lese guiden vi lenker til under.

            </>

          ),

        }

      : undefined

  }

  unit={

    false ? (

      <>

        m<sup>2</sup>

      </>

    ) : undefined

  }

/>

React API

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