Hopp til innhold

Text­Area

Når vi vil gi brukeren mulighet til å sende inn fritekst.

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

TextArea
Egenskaper
Variant
Visning
Tema
Tetthet
const [value, setValue] = React.useState("");



const handleChange = (e) => setValue(e.target.value);



return (

  <TextArea

    label="Beskrivelse"

    name="beskrivelse"

    value={value}

    onChange={handleChange}

    helpLabel={

      false

        ? "Beskriv så utfyllende som mulig"

        : undefined

    }

    errorLabel={

      false

        ? "Du må fylle ut en beskrivelse. Beskriv så utfyllende som mulig."

        : undefined

    }

    autoExpand={false}

    startOpen={false}

    counter={

      false

        ? {

            maxLength: 200,

            hideProgress: false,

          }

        : undefined

    }

    variant={'small'}

    tooltipProps={

      false

        ? { content: "Beskriv så utfyllende som mulig." }

        : undefined

    }

  />

);

React API

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