Dropdown

Searchable dropdown input supporting text, flag, icon, and multi-select modes.

Open in Storybook

Interactive Demo

Usage

<script setup>
import { ref } from 'vue';
import { DropdownInput } from '@yellowcard/b2b-design-system';

const selected = ref(null);
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
];
</script>

<template>
  <DropdownInput
    v-model="selected"
    :options="options"
    label="Select an option"
    placeholder="Choose..."
  />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	any	—	Selected value (v-model)
type	string	—	Dropdown type (text, flag, icon, multi)
size	'large' | 'small'	'large'	Input size
label	string	—	Label text
placeholder	string	—	Placeholder text
helperText	string	—	Helper text below input
error	boolean	false	Error state
errorMessage	string	—	Error message text
disabled	boolean	false	Disabled state
required	boolean	false	Required indicator
options*	array	—	Array of options
searchable	boolean	false	Enable search filtering
maxTags	number	—	Max selected tags in multi-select mode

Events

Event	Payload	Description
update:modelValue	any	Emitted when selection changes