Select Input

Commonly used select input component.

Installation

npx wdc add select

Single Selection Examples

Basic Usage

Select from a simple array of strings.

Favorite Fruit

Binding Objects

Bind to object properties using bindLabel and bindValue.

Assign User

Signal Country

Binding directly to a WritableSignal

Signal Value: IN

States

Error, success, and disabled states.

Country

Please select your country.

Disabled

Multiple Selection Examples

Basic Usage

Select multiple strings from a list.

Skills

Select skills...

Object Binding

Select multiple objects by binding ID.

Team Members

Add members...

Validation States

Consistent error styling with single select and inputs.

Required Tags

Select items...

At least one tag is required.

Approved By

Manager

API Reference

Input	Type	Default	Description
options	any[]	required	Array of items to display in the dropdown.
bindLabel	string	'label'	Property name to display as the label (e.g., "name").
bindValue	string	'value'	Property name to use as the value (e.g., "id").
searchable	boolean	true	Enables a search input inside the dropdown.
label	string	''	Label displayed above the select trigger.
placeholder	string	'Select an option'	Placeholder text when no value is selected.

check_circle

SEO & Accessibility

The select component uses a button trigger with aria-expanded and a proper label. While custom select menus are harder for crawlers than native , this implementation follows accessibility guidelines (WAI-ARIA) ensuring screen readers can announce the label and state correctly.