Components

NativeSelect

Dropdown lists are used when one needs to select one out of many options.

Examples

A basic example

<NativeSelect label="Choose language">
  <option>Norwegian (Bokmål)</option>
  <option>Norwegian (Nynorsk)</option>
  <option>Sami</option>
  <option>Swedish</option>
  <option>Danish</option>
  <option>Finnish</option>
  <option>English</option>
</NativeSelect>

With error message, for form validaiton

<NativeSelect label="Choose language" invalid errorText="invalid selection">
  <option>Norwegian (Bokmål)</option>
  <option>Swedish</option>
  <option>Danish</option>
  <option>English</option>
</NativeSelect>

Different variants

<Stack gap={3}>
  <NativeSelect label="Base">
    <option>Train</option>
    <option>Bus</option>
    <option>Boat</option>
  </NativeSelect>
  <NativeSelect label="Floating" variant="floating">
    <option>Train</option>
    <option>Bus</option>
    <option>Boat</option>
  </NativeSelect>
</Stack>

Guidelines

NativeSelect is used when there are many options, and you want to maintain the original select appearance. It is preferred where advanced design is not needed. It is an alternative to InfoSelect.

Code

`<NativeSelect />`

import { NativeSelect } from "@vygruppen/spor-react";

A styled version of the native <select /> element

Props

Name	Type	Description
`label`	`string`
`children`	`React.ReactNode`	<option /> elements
`disabled`	`boolean`
`invalid`	`boolean`
`variant`	`"base" \| "floating"`	Defaults to base.

Fundamentals

Getting started