Combobox

Skjemaelement for å velge mellom flere alternativer.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

function ComboboxExample() {
  const [val, setVal] = React.useState(["TRD"]);

  return (
    <>
      <div style={{ marginBottom: "1rem" }}>Valgt verdi: <b>{val.join(', ')}</b></div>
      <Combobox value={val} onValueChange={setVal} label="Velg flyplasser">
        <ComboboxEmptyItem>Fant ingen flyplass</ComboboxEmptyItem>
        <ComboboxItem value="ARN">Stockholm</ComboboxItem>
        <ComboboxItem value="OSL">Oslo</ComboboxItem>
        <ComboboxItem value="TRD">Trondheim</ComboboxItem>
        <ComboboxItem value="MOL">Molde</ComboboxItem>
        <ComboboxItem value="CPH">København</ComboboxItem>
        <ComboboxItem value="BER">Berlin</ComboboxItem>
        <ComboboxItem value="LIS">Lisboa</ComboboxItem>
        <ComboboxItem value="VVO">Vladivostok</ComboboxItem>
        <ComboboxItem value="PEK">Beijing</ComboboxItem>
        <ComboboxItem value="HND">Tokyo</ComboboxItem>
        <ComboboxItem value="LAX">Los Angeles</ComboboxItem>
        <ComboboxItem value="GIG">Rio de Janeiro</ComboboxItem>
      </Combobox>
    </>
  )
}

Størrelser

Comboboxen kan være small, medium, eller large

function ComboboxSizes() {
  const [val, setVal] = React.useState(["TRD"]);
  
  const items = (
    <>
      <ComboboxEmptyItem>Fant ingen flyplass</ComboboxEmptyItem>
      <ComboboxItem value="ARN">Stockholm</ComboboxItem>
      <ComboboxItem value="OSL">Oslo</ComboboxItem>
      <ComboboxItem value="TRD">Trondheim</ComboboxItem>
    </>
  )

  return (
    <>
      <div style={{ marginBottom: "1rem" }}>Valgt verdi: <b>{val.join(', ')}</b></div>
      <Stack gap="md">
        <Combobox size="small" value={val} onValueChange={setVal} label="Velg flyplasser">
          {items}
        </Combobox>
        <Combobox size="medium" value={val} onValueChange={setVal} label="Velg flyplasser">
          {items}
        </Combobox>
        <Combobox size="large" value={val} onValueChange={setVal} label="Velg flyplasser">
          {items}
        </Combobox>
      </Stack>
    </>
  )
}

Disabled

function DisabledCombobox() {
  const [val, setVal] = React.useState(["TRD", "ARN"]);

  return (
    <Combobox disabled value={val} onValueChange={setVal} label="Velg flyplasser">
      <ComboboxEmptyItem>Fant ingen flyplass</ComboboxEmptyItem>
      <ComboboxItem value="ARN">Stockholm</ComboboxItem>
      <ComboboxItem value="OSL">Oslo</ComboboxItem>
      <ComboboxItem value="TRD">Trondheim</ComboboxItem>
    </Combobox>
  )
}

Input placeholder

Man kan sette placeholder for input-feltet i comboboxen ved hjelp av inputPlaceholder

function DisabledCombobox() {
  const [val, setVal] = React.useState(["TRD", "ARN"]);

  return (
    <Combobox inputPlaceholder="Navn på flyplass.." value={val} onValueChange={setVal} label="Velg flyplasser">
      <ComboboxEmptyItem>Fant ingen flyplass</ComboboxEmptyItem>
      <ComboboxItem value="ARN">Stockholm</ComboboxItem>
      <ComboboxItem value="OSL">Oslo</ComboboxItem>
      <ComboboxItem value="TRD">Trondheim</ComboboxItem>
    </Combobox>
  )
}

Retningslinjer

Denne komponenten bør kun brukes dersom brukeren skal velge flere elementer. Hvis brukeren kun skal velge ett element bør <Select /> brukes.

Kode

<Combobox />

import { Combobox } from "@aneo-org/design-react/clientComponents";

Rotelement for Combobox

Prop	Type	Beskrivelse
label	`string`
hideLabel?	`boolean`	Skjuler label visuelt, men leses fortsatt opp for skjermlesere.
inputPlaceholder?	`string`	Placeholder for søkefeltet i comboboxen
size?	`"small" \| "medium" \| "large"`
value	`Array<string>`
onValueChange	`(newValue: string[]) => void`

<ComboboxItem />

import { ComboboxItem } from "@aneo-org/design-react/clientComponents";

Element inne i Combobox.

Prop	Type	Beskrivelse
value?	`string`
children	`ReactNode`

<ComboboxEmptyItem />

import { ComboboxEmptyItem } from "@aneo-org/design-react/clientComponents";

Element inne i Combobox som vises når det ikke er noen søketreff.

Prop	Type	Beskrivelse
children	`ReactNode`