Combobox

Om komponenten

Combobox er en kombinasjon av tekstfelt og nedtrekksliste. Brukeren kan skrive direkte i tekstfeltet, eller ta ett valg i en liste med alternativer.

Egnet til:

Skjemaer hvor bruker skal velge ett alternativ fra en liste

Uegnet til:

Når bruker har få alternativer å velge mellom. Bruk da heller RadioGroup
Når bruker kan velge flere alternativer i listen. Da bruker du heller CheckBox

Relaterte komponenter

Select

Varianter

Controlled

En uncontrolled Combobox.

<Combobox
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
>
  <ComboboxItem className="flex gap-2">
    Oslo
    <small className="text-gray">
      Oslo
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Frogn
    <small className="text-gray">
      Akershus
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Tønsberg
    <small className="text-gray">
      Vestfold og Telemark
    </small>
  </ComboboxItem>
</Combobox>

En påkrevd Combobox.

<form
  onSubmit={(e) => e.preventDefault()}
  className="grid gap-6"
>
  <Combobox
    label="Velg boligprosjekt"
    placeholder="Velg boligprosjekt"
    isRequired
  >
    <ComboboxItem className="flex gap-2">
      Oslo
      <small className="text-gray">
        Oslo
      </small>
    </ComboboxItem>
    <ComboboxItem className="flex gap-2">
      Frogn
      <small className="text-gray">
        Akershus
      </small>
    </ComboboxItem>
    <ComboboxItem className="flex gap-2">
      Tønsberg
      <small className="text-gray">
        Vestfold og Telemark
      </small>
    </ComboboxItem>
  </Combobox>
  <Button type="submit" className="w-fit">
    Send inn
  </Button>
</form>

En Combobox med beskrivelse.

<Combobox
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
  description="OBOS bygger nye boliger over store deler av landet."
>
  <ComboboxItem className="flex gap-2">
    Oslo
    <small className="text-gray">
      Oslo
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Frogn
    <small className="text-gray">
      Akershus
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Tønsberg
    <small className="text-gray">
      Vestfold og Telemark
    </small>
  </ComboboxItem>
</Combobox>

En Combobox med usynlig label.

<Combobox
  aria-label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
>
  <ComboboxItem className="flex gap-2">
    Oslo
    <small className="text-gray">
      Oslo
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Frogn
    <small className="text-gray">
      Akershus
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Tønsberg
    <small className="text-gray">
      Vestfold og Telemark
    </small>
  </ComboboxItem>
</Combobox>

Validering

En Combobox der man må velge fra listen for å gå videre.

<Combobox
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
  isInvalid
>
  <ComboboxItem className="flex gap-2">
    Oslo
    <small className="text-gray">
      Oslo
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Frogn
    <small className="text-gray">
      Akershus
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Tønsberg
    <small className="text-gray">
      Vestfold og Telemark
    </small>
  </ComboboxItem>
</Combobox>

En Combobox der man må velge fra listen for å gå videre, med feilmelding.

<Combobox
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
  errorMessage="Feltet er påkrevd"
>
  <ComboboxItem className="flex gap-2">
    Oslo
    <small className="text-gray">
      Oslo
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Frogn
    <small className="text-gray">
      Akershus
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Tønsberg
    <small className="text-gray">
      Vestfold og Telemark
    </small>
  </ComboboxItem>
</Combobox>

Gruppering

En uncontrolled, gruppert Combobox.

<Combobox
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
>
  <ComboboxSection>
    <ComboboxHeader>Oslo</ComboboxHeader>
    <ComboboxItem className="flex gap-2">
      Oslo
    </ComboboxItem>
  </ComboboxSection>
  <ComboboxSection>
    <ComboboxHeader>
      Akershus
    </ComboboxHeader>
    <ComboboxItem className="flex gap-2">
      Enebakk
    </ComboboxItem>
    <ComboboxItem className="flex gap-2">
      Frogn
    </ComboboxItem>
  </ComboboxSection>
  <ComboboxSection>
    <ComboboxHeader>
      Vestfold og Telemark
    </ComboboxHeader>
    <ComboboxItem className="flex gap-2">
      Horten
    </ComboboxItem>
    <ComboboxItem className="flex gap-2">
      Tønsberg
    </ComboboxItem>
  </ComboboxSection>
</Combobox>

Controlled

En controlled Combobox.

function() {
  const [selectedKey, setSelectedKey] = React.useState("");

return <Combobox
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
  selectedKey={selectedKey}
  onSelectionChange={setSelectedKey}
>
  <ComboboxItem className="flex gap-2">
    Oslo
    <small className="text-gray">
      Oslo
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Frogner
    <small className="text-gray">
      Akershus
    </small>
  </ComboboxItem>
  <ComboboxItem className="flex gap-2">
    Tønsberg
    <small className="text-gray">
      Vestfold og Telemark
    </small>
  </ComboboxItem>
</Combobox>
}

Props

Combobox

Prop	Description	Default
`description?`	Help text for the form control.	-
`errorMessage?`	Error message for the form control. Automatically sets `isInvalid` to true	-
`isPending?`	Display the dropdown button trigger in a pending state	false
`label?`	Label for the form control.	-
`placeholder?`	Placeholder text. Only visible when the input value is empty.	-
`form?`		-
`defaultValue?`	The default value (uncontrolled).	-
`autoFocus?`		-
`name?`		-
`value?`	The current value (controlled).	-
`render?`		-
`items?`		-
`isRequired?`	Whether user input is required on the input before form submission.	-
`isInvalid?`	Whether the input value is invalid.	-
`validationBehavior?`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.	'native'
`validate?`	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.	-
`disabledKeys?`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
`shouldFocusWrap?`		-
`defaultItems?`		-
`selectionMode?`		'single'
`selectedKey?`		-
`defaultSelectedKey?`		-
`inputValue?`		-
`defaultInputValue?`		-
`allowsCustomValue?`		-
`menuTrigger?`		'input'
`defaultFilter?`		-
`formValue?`		'key'
`allowsEmptyCollection?`		-
Events
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onChange?`	Handler that is called when the value changes.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`onOpenChange?`		-
`onSelectionChange?`		-
`onInputChange?`		-
Styles
`className?`	Additional CSS className for the element.	-
`style?`	Additional style properties for the element.	-
Accessibility
`id?`		-
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

ComboboxItem

Prop	Description	Default
`id?`	The unique id of the item.	-
`value?`	The object value that this item represents. When using dynamic collections, this is set automatically.	-
`textValue?`	A string representation of the item's contents, used for features like typeahead.	-
`isDisabled?`	Whether the item is disabled.	-
`children?`		-
`render?`		-
`target?`		-
Events
`onAction?`	Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
Links
`href?`		-
`hrefLang?`		-
`rel?`		-
`download?`		-
`ping?`		-
`referrerPolicy?`		-
`routerOptions?`		-
Styles
`className?`		'react-aria-ListBoxItem'
`style?`		-
Accessibility
`aria-label?`	An accessibility label for this item.	-

ComboboxSection

Prop	Description	Default
`id?`	The unique id of the section.	-
`value?`	The object value that this section represents. When using dynamic collections, this is set automatically.	-
`children?`		-
`dependencies?`		-
`items?`	Item objects in the collection.	-
`render?`		-
Styles
`className?`		'react-aria-ListBoxItem'
`style?`		-
Accessibility
`aria-label?`	An accessibility label for the section.	-

ComboboxHeader

Prop	Description	Default
`id?`		-
`render?`		-