Select

NbSelect uses NbSelectItem children and supports v-model. Open the menu to try the styled options and keyboard navigation.

Preview

PreviewCode

Copy

<script setup lang="ts">
import { ref } from 'vue'
import { NbSelect, NbSelectItem } from '@neobrut-vue/core'

const color = ref('')
</script>

<template>
  <div class="demo-stack">
    <NbSelect v-model="color" label="Pick a color" placeholder="Choose one">
      <NbSelectItem value="yellow">Sunshine yellow</NbSelectItem>
      <NbSelectItem value="mint">Mint green</NbSelectItem>
      <NbSelectItem value="coral">Coral pink</NbSelectItem>
    </NbSelect>
    <p aria-live="polite">{{ color ? `Selected: ${color}` : 'Nothing selected yet.' }}</p>
  </div>
</template>

<style scoped>
.demo-stack { display: grid; gap: 1rem; max-width: 26rem; }
.demo-stack p { margin: 0; font-weight: 700; }
</style>

Usage

<NbSelect v-model="color" label="Color" placeholder="Choose one">
  <NbSelectItem value="yellow">Yellow</NbSelectItem>
  <NbSelectItem value="mint">Mint</NbSelectItem>
</NbSelect>

Each item needs a unique value. Pass name when the select participates in a native form submission.