Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/Select

Select

Dropdown selection control with grid overlay pattern

✨ Quick Examples

Dropdown selector with flexible options and validation.

Basic Select

Country Selector

Priority Level

T-Shirt Size*

🔧 Props

Prop	Type	Default	Description
id	string	'select-{timestamp}'	Unique identifier (auto-generated)
label	string	''	Label text above select
options	array	[]	Array of strings or {value, text} objects
value	State \| string	''	Selected value (can be reactive state)
placeholder	string	'Select an option'	Placeholder text when nothing selected
required	boolean	false	Shows red asterisk when true
disabled	boolean	false	Disables the select
message	State<{code, detail}>	undefined	Validation message object
leftIcon	Element	undefined	Icon on the left side
onchange	Function	undefined	Change event handler

💻 Usage

Basic Usage

const selectedValue = van.state('');

Select({
  label: 'Choose an option',
  options: ['Option 1', 'Option 2', 'Option 3'],
  value: selectedValue,
  onchange: e => selectedValue.val = e.target.value
})

Object Options

const country = van.state('');

Select({
  label: 'Select Country',
  options: [
    { value: 'us', text: 'United States' },
    { value: 'ca', text: 'Canada' },
    { value: 'uk', text: 'United Kingdom' }
  ],
  value: country,
  placeholder: 'Choose a country',
  onchange: e => country.val = e.target.value
})

With Validation

const size = van.state('');
const sizeMessage = van.state({ code: '', detail: '' });

Select({
  label: 'T-Shirt Size',
  options: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
  value: size,
  required: true,
  message: sizeMessage,
  onchange: e => {
    size.val = e.target.value;
    if (e.target.value) {
      sizeMessage.val = { code: 'success', detail: 'Size selected!' };
    } else {
      sizeMessage.val = { code: 'error', detail: 'Please select a size' };
    }
  }
})

📋 Option Types

Select supports two option formats for maximum flexibility.

['Option 1', 'Option 2'] - String array when value and text are same
[{value: 'us', text: 'United States'}] - Object array when value differs from display text

⚡️ Best Practices

Always provide meaningful placeholder text to guide users
Use object options when value differs from display text
Add validation messages for required fields using message prop
Consider using leftIcon for visual context
Keep option lists reasonably short (< 20 items for best UX)
Native select element ensures proper mobile behavior and accessibility

✨ Key Features

Select component capabilities and design patterns.

Flexible options - String arrays or object arrays
Validation states - Error, warning, success, info messages
Grid overlay - Custom dropdown arrow without absolute positioning
Native select - Proper mobile behavior and accessibility
Icon support - Optional left icon
Mobile friendly - Native mobile select UI on touch devices

Explore More Components

Browse other component categories