nb-select

<template>
  <NbSelect
    nb-id="select-custom"
    select-name="select-custom"
    :options="selectOptions"
    :selected-option-only="selectedValue"
  >
    <template #slot-select-item="{ propRow, propIndex }">
      <div>
        <strong>{{ propRow.text }}</strong>
        <span style="color: #999;"> - {{ propRow.description }}</span>
      </div>
    </template>
  </NbSelect>
</template>

<template>
  <NbSelect
    nb-id="select-light"
    select-name="select-light"
    theme="light"
    :options="selectOptions"
    :selected-option-only="selectedValue"
    light-bg-color="#dbeafe"
    light-bg-color-focus="#bfdbfe"
    light-border-color="#93c5fd"
    light-border-color-focus="#60a5fa"
    light-text-color="#1e40af"
    light-placeholder-color="#64748b"
    light-option-text-color="#1e40af"
    light-option-text-color-selected="#ffffff"
    light-option-bg-color-selected="#3b82f6"
    :border-radius="0.375"
    @changed="handleChange($event)"
    @user-changed="handleUserChange($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompSelect',
});

const selectOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const selectedValue = ref('option1');

const handleChange = (value) => {
  selectedValue.value = value;
  console.log('Changed:', value);
};

const handleUserChange = (value) => {
  console.log('User changed:', value);
};
</script>

<template>
  <NbSelect
    nb-id="select-dark"
    select-name="select-dark"
    theme="dark"
    :options="selectOptions"
    :selected-option-only="selectedValue"
    dark-bg-color="#8b5cf6"
    dark-bg-color-focus="#7c3aed"
    dark-border-color="#a78bfa"
    dark-border-color-focus="#8b5cf6"
    dark-text-color="#f3f4f6"
    dark-placeholder-color="#c4b5fd"
    dark-option-text-color="#f3f4f6"
    dark-option-text-color-selected="#ffffff"
    dark-option-bg-color-selected="#6d28d9"
    :border-radius="0.5"
    @changed="handleChange($event)"
    @user-changed="handleUserChange($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompSelectDark',
});

const selectOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const selectedValue = ref('option2');

const handleChange = (value) => {
  selectedValue.value = value;
  console.log('Changed:', value);
};

const handleUserChange = (value) => {
  console.log('User changed:', value);
};
</script>

<template>
  <NbSelect
    nb-id="select-multiple"
    select-name="select-multiple"
    theme="light"
    :multiple="true"
    :options="selectOptions"
    :selected-option-multiple="selectedValues"
    @changed="handleChange($event)"
    @user-changed="handleUserChange($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompSelectMultiple',
});

const selectOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const selectedValues = ref(['option1', 'option2']);

const handleChange = (value) => {
  selectedValues.value = value;
  console.log('Changed:', value);
};

const handleUserChange = (value) => {
  console.log('User changed:', value);
};
</script>

<template>
  <NbSelect
    nb-id="select-groups"
    select-name="select-groups"
    theme="light"
    :options="selectOptionsWithGroups"
    :selected-option-only="selectedValue"
    group-key="group"
    :has-groups="true"
    @changed="handleChange($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectOptionsWithGroups = [
  { value: 'a1', text: 'Option A1', group: 'Group A' },
  { value: 'a2', text: 'Option A2', group: 'Group A' },
  { value: 'b1', text: 'Option B1', group: 'Group B' },
  { value: 'b2', text: 'Option B2', group: 'Group B' }
];

const selectedValue = ref('a1');

const handleChange = (value) => {
  selectedValue.value = value;
};
</script>

<!-- ❌ Problem: dropdown will be clipped -->
<div style="overflow: hidden;">
  <NbSelect nb-id="select-1" :options="options" />
</div>

<!-- ✅ Solution: remove overflow: hidden or use overflow: visible -->
<div style="overflow: visible;">
  <NbSelect nb-id="select-1" :options="options" />
</div>