SelectBox

A dropdown select built on reka-ui.

Examples

Interval

<script setup>
import { ref } from "vue";
const interval = ref("weekly");
</script>

<SelectBox
  v-model="interval"
  label="Interval"
  :options="[
    { value: 'daily', label: 'Daily' },
    { value: 'weekly', label: 'Weekly' },
    { value: 'monthly', label: 'Monthly' },
  ]"
/>

Hidden label

Use hide-label to visually hide the label while keeping it available to screen readers. Prefer this over aria-label whenever you have label text, since a real <label> is translated by browsers and keeps the naming in the DOM.

Interval

<SelectBox
  v-model="interval"
  label="Interval"
  hide-label
  :options="[
    { value: 'daily', label: 'Daily' },
    { value: 'weekly', label: 'Weekly' },
    { value: 'monthly', label: 'Monthly' },
  ]"
/>

Model

Name	Type
v-model	string

Props

Prop	Type	Required	Default
label	string	No	—
hideLabel	boolean	No	—
ariaLabel	string	No	—
options	SelectOption[]	Yes	—
placeholder	string	No	—

SelectOption

interface SelectOption {
  value: string;
  label: string;
}