Hopp til innhold

Select

Vi bruker nedtrekkslister til å gi brukeren en liste med alternativ. Nedtrekkslister passer i de tilfellene det er for mange valg til å bruke radioknapper. Nedtrekkslisten må ha en overskrift, som forteller hva det er brukerne kan velge mellom i listen.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-select-react
Bruk
import { Select } from "@fremtind/jkl-select-react";



// Importer stilark via JavaScript med CSS-loader.

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

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

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



// Eller importer stilark via SCSS.

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

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

@use "@fremtind/jkl-input-group/input-group";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

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



const components = {

  Select: Select,

  NativeSelect: NativeSelect,

};



const Component = components['Select'];



return (

  <Component

    id="produsent"

    name="produsent"

    label="Hvilket merke er telefonen?"

    labelProps={{ variant: 'small' }}

    helpLabel={

      false

        ? "Med merke mener vi for eksempel Apple eller Samsung."

        : undefined

    }

    errorLabel={

      false

        ? "Du må velge merket til telefonen, for eksempel Apple."

        : undefined

    }

    items={[

      { value: "google", label: "Google og noen flere" },

      { value: "apple", label: "Apple" },

      { value: "samsung", label: "Samsung" },

      { value: "LG", label: "LG" },

    ]}

    value={value}

    onChange={setValue}

    searchable={false}

    tooltipProps={

      false

        ? {

            content:

              "Vi spør om merket på telefonen for å finne riktig reperatør for deg.",

          }

        : undefined

    }

    maxShownOptions={5}

  />

);

React API

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