Select

GitHub Figma

Om komponenten

Select viser brukeren en nedtrekksliste der ett alternativ kan velges.

Egnet til:

Skjemaer hvor bruker skal velge ett alternativ fra en liste
Når siden for det meste er skjemabasert.

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

ComboBox

Eksempler

En uncontrolled Select

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

En påkrevd Select

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

En uncontrolled Select med beskrivelse

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

En uncontrolled Select med usynlig label

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

Validering

En invalid uncontrolled Select

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

En uncontrolled Select med feilmelding

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

Gruppering

En uncontrolled, gruppert Select

<Select
  label="Velg boligprosjekt"
  placeholder="Velg boligprosjekt"
>
  <SelectSection>
    <SelectHeader>Oslo</SelectHeader>
    <SelectItem className="flex gap-2">
      Oslo
    </SelectItem>
  </SelectSection>
  <SelectSection>
    <SelectHeader>
      Akershus
    </SelectHeader>
    <SelectItem className="flex gap-2">
      Enebakk
    </SelectItem>
    <SelectItem className="flex gap-2">
      Frogn
    </SelectItem>
  </SelectSection>
  <SelectSection>
    <SelectHeader>
      Vestfold og Telemark
    </SelectHeader>
    <SelectItem className="flex gap-2">
      Horten
    </SelectItem>
    <SelectItem className="flex gap-2">
      Tønsberg
    </SelectItem>
  </SelectSection>
</Select>

Controlled

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

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

Retningslinjer

Bruk med kun placeholdertekst

Ikke bruk den dersom du har få valg

Formatering

Anatomi

1. Label Tekst som informerer bruker om hva de kan forvente å finne i nedtrekksmenyen

2. Beskrivelse Hjelpetekst som gir bruker kontekst for å ta riktig valg i nedtrekksmenyen

3. Dropdown Ekspanderende felt som supplerer hjelpeteksten. Viktig informasjon skal ikke legges her

4. Verdi Viser valget brukeren har tatt i select-komponenten

5. Field Der brukeren legger inn data.

Universell utforming

Husk på

Alle tekstfelt bør ha et tilknyttet label eller instruksjon som viser hvordan skjemaet skal fylles ut.
Label (ledeteksten) bør være koblet til tekstfeltet i koden slik at skjermlesere kan lese opp riktig informasjon. Komplekse skjema kan kreve mer hjelp enn bare enn labels.
Feilmeldinger bør være kodet som tekst og identifisere det spesifikke skjemaelementet hvor feilen oppstod. Feilmeldingen må beskrive feilen og være synlig uten at brukeren gjør noen ekstra handlinger.

Sjekkliste

✓ Alle nedtrekksmenyene har tilknyttet label eller instruksjon.

✓ Tydelig, kort og konsis label

Les mer

Ledetekster

WAI-ARIA Select Pattern

Props

Select

Prop	Description	Default
`description?`	Help text for the form control.	-
`errorMessage?`	Error message for the form control. Automatically sets `isInvalid` to true	-
`label?`	Label for the form control.	-
`placeholder?`	Placeholder text. Only visible when the input value is empty. Temporary text that occupies the select when it is empty.	'Select an item' (localized)
`form?`	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See MDN.	-
`defaultValue?`	The default value (uncontrolled).	-
`autoFocus?`		-
`name?`	The name of the input, used when submitting an HTML form.	-
`value?`	The current value (controlled).	-
`excludeFromTabOrder?`		-
`render?`		-
`autoComplete?`	Describes the type of autocomplete functionality the input should provide if any. See MDN.	-
`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.	-
`isOpen?`	Sets the open state of the menu.	-
`defaultOpen?`	Sets the default open state of the menu.	-
`disabledKeys?`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
`selectionMode?`	Whether single or multiple selection is enabled.	'single'
`selectedKey?`	The currently selected key in the collection (controlled). @deprecated	-
`defaultSelectedKey?`	The initial selected key in the collection (uncontrolled). @deprecated	-
`allowsEmptyCollection?`	Whether the select should be allowed to be open when the collection is empty.	-
`shouldCloseOnSelect?`	Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise.	-
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?`	Method that is called when the open state of the menu changes.	-
`onSelectionChange?`	Handler that is called when the selection changes. @deprecated	-
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?`		-

SelectItem

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.	-

SelectSection

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.	-

SelectHeader

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