oa/documentation/elements/forms/inputs/input-dataset-documentation.md

state

state
color cake date #8b5cf6

Autocomplete using native datalist

You can use native datalist let your browser handle the autocomplete for you. Just add a list attribute to your input and add the datalist element with the id that matches the list attribute.

This is a great way to provide a list of options to your users.

<script setup lang="ts">

const color = ref('#8b5cf6')
const cake = ref('')
const date = ref('')
</script>

<template>
  <div class="is-flex is-flex-wrap-wrap" :style="{ gap: '1rem' }">
    <VField>
      <VControl :style="{ width: '70px' }">
        <VInput
          v-model="color"
          list="colors-list"
          type="color"
          placeholder="Pick a color"
        />
        <datalist id="colors-list">
          <option value="#84cc16" />
          <option value="#22c55e" />
          <option value="#0ea5e9" />
          <option value="#6366f1" />
          <option value="#8b5cf6" />
          <option value="#d946ef" />
          <option value="#f43f5e" />
          <option value="#facc15" />
          <option value="#fb923c" />
          <option value="#9ca3af" />
        </datalist>
      </VControl>
    </VField>
    <VField>
      <VControl class="is-flex-grow-1">
        <VInput
          v-model="cake"
          list="cake-list"
          type="text"
          placeholder="Choose a recipe"
        />
        <datalist id="cake-list">
          <option value="Chocolate cake" />
          <option value="Vanilla cake" />
          <option value="Red velvet cake" />
          <option value="Carrot cake" />
          <option value="Lemon cake" />
          <option value="Strawberry cake" />
          <option value="Coconut cake" />
          <option value="Black forest cake" />
          <option value="Pineapple upside-down cake" />
          <option value="Marble cake" />
          <option value="Funfetti cake" />
          <option value="Coffee cake" />
          <option value="Tiramisu cake" />
          <option value="Banana cake" />
          <option value="Raspberry cake" />
          <option value="Oreo cake" />
          <option value="German chocolate cake" />
          <option value="Pumpkin cake" />
          <option value="Blueberry cake" />
          <option value="Almond cake" />
        </datalist>
      </VControl>
    </VField>
    <VField>
      <VControl class="is-flex-grow-1">
        <VInput
          v-model="date"
          list="times-list"
          type="time"
          placeholder="Pick an hour"
        />
        <datalist id="times-list">
          <option value="12:00" />
          <option value="13:00" />
          <option value="14:00" />
        </datalist>
      </VControl>
    </VField>
  </div>
</template>