Select

Choose one option from a list in the browser's own dropdown.

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
import { ref } from 'vue'

const land = ref<string>()
</script>

<template>
  <FsField label="Land" class="w-full max-w-sm">
    <FsSelect v-model="land" placeholder="Kies een land">
      <option value="NL">Nederland</option>
      <option value="BE">België</option>
      <option value="DE">Duitsland</option>
    </FsSelect>
  </FsField>
</template>

Usage

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
import { ref } from 'vue'

const land = ref<string>()
</script>

<template>
  <FsField label="Land">
    <FsSelect v-model="land" placeholder="Kies een land">
      <option value="NL">Nederland</option>
      <option value="BE">België</option>
    </FsSelect>
  </FsField>
</template>

placeholder adds an empty first option that says what to do; give one whenever the value can be unset. The options are plain <option> and <optgroup> elements. The value is always a string, and "" while the placeholder is chosen. For a list people search through use Combobox; for two or three options that should stay visible use Radio.

Examples

Preselected

Preselect a setting or an answer you already know, never the answer to a question.

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
import { ref } from 'vue'

const tarief = ref('21')
</script>

<template>
  <FsField label="Btw-tarief" class="w-full max-w-sm">
    <FsSelect v-model="tarief">
      <option value="0">0%</option>
      <option value="9">9%</option>
      <option value="21">21%</option>
    </FsSelect>
  </FsField>
</template>

Groups

Group options only when every option fits a group.

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
import { ref } from 'vue'

const status = ref<string>()
</script>

<template>
  <FsField label="Status" class="w-full max-w-sm">
    <FsSelect v-model="status" placeholder="Kies een status">
      <optgroup label="Offerte">
        <option value="concept">Concept</option>
        <option value="verzonden">Verzonden</option>
      </optgroup>
      <optgroup label="Order">
        <option value="open">Open</option>
        <option value="geleverd">Geleverd</option>
      </optgroup>
    </FsSelect>
  </FsField>
</template>

Required and invalid

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
import { ref } from 'vue'

const leverancier = ref<string>()
</script>

<template>
  <FsField label="Leverancier" required error="Kies een leverancier." class="w-full max-w-sm">
    <FsSelect v-model="leverancier" placeholder="Kies een leverancier">
      <option value="a">Van Dijk Bouwmaterialen</option>
      <option value="b">Bakker Groothandel</option>
    </FsSelect>
  </FsField>
</template>

Read-only and disabled

A read-only select shows the chosen option as text and is still submitted. A disabled one is not.

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <FsField label="Klant" readonly description="De klant staat vast zodra de offerte is verstuurd.">
      <FsSelect model-value="jansen">
        <option value="jansen">Bouwbedrijf Jansen</option>
        <option value="bakker">Bakker BV</option>
      </FsSelect>
    </FsField>
    <FsField label="Land" disabled>
      <FsSelect model-value="NL">
        <option value="NL">Nederland</option>
      </FsSelect>
    </FsField>
  </div>
</template>

Dense

<script setup lang="ts">
import { FsField, FsSelect } from '@fivespark/ui'
import { ref } from 'vue'

const periode = ref('maand')
</script>

<template>
  <FsField label="Periode" size="dense" class="w-full max-w-sm">
    <FsSelect v-model="periode">
      <option value="week">Week</option>
      <option value="maand">Maand</option>
      <option value="kwartaal">Kwartaal</option>
    </FsSelect>
  </FsField>
</template>

Keyboard

The list is the browser's own, so the keys follow the platform.

Key	Does
Space, ↓, Alt + ↓	Opens the list
Letters	Jump to the option that starts with them
Esc	Closes the list

API Reference

FsSelect

Prop	Type	Default	Description
size	"default" | "dense"		`default` is 36px high; `dense` is 32px, for tables and toolbars. In a field, the field's.
id	string		Only outside a field; in one, it takes the field's.
invalid	boolean		Marks the value as wrong; the field says why. In a field, the field's.
disabled	boolean		Unavailable until something else is done: not focusable, not submitted. A value to see but not change is `readonly`. In a field, the field's.
readonly	boolean		A value to see and copy, not change: shown as the chosen option's text. In a field, the field's.
required	boolean		In a field, the field's, which also shows the asterisk. Choosing the placeholder leaves it unanswered.
placeholder	string		A first option that says what to do, such as "Kies een land", and empties the value when chosen. Give one whenever the value can be unset.
modelValue	string | null		The chosen option's value; `""` while the placeholder is chosen. Unset is taken as `""`. Without `v-model` it keeps its own.

Event	Payload	Description
update:modelValue	[value: string | null | undefined]	Sent with the new `modelValue`, for `v-model`.

Slot	Props	Description
default	any	The options: `<option>` and `<optgroup>` elements, each option's text written in the template, not built by a component.