EccUtilsDesignSelect Component

2.0.0-alpha.6

<ecc-utils-design-select/>

EccUtilsDesignSelect

Overview

The ecc-utils-design-select component provides a flexible and accessible dropdown menu for selecting a value from a set of options. It's a compound component, giving you full control over its structure and behavior.

This component is composed of several parts that work together, including a trigger, content area, items, labels, and separators.

Usage

Basic Select

This example shows a basic select with a few options.

Apple

Banana

Blueberry

Select with Groups

This example shows how to group options using labels and separators.

North America

Eastern Standard Time (EST)

Pacific Standard Time (PST)

Europe

Greenwich Mean Time (GMT)

Central European Time (CET)

Components

The Select is built by combining these components:

Component	Tag Name	Description
`Select`	`ecc-utils-design-select`	The root container for the select.
`SelectValue`	`ecc-utils-design-select-value`	Displays the selected value or a placeholder.
`SelectTrigger`	`ecc-utils-design-select-trigger`	The button that opens the select dropdown.
`SelectContent`	`ecc-utils-design-select-content`	The container for the select options.
`SelectGroup`	`ecc-utils-design-select-group`	A container for grouping options.
`SelectLabel`	`ecc-utils-design-select-label`	A title for a group of options.
`SelectItem`	`ecc-utils-design-select-item`	A single option in the select dropdown.
`SelectSeparator`	`ecc-utils-design-select-separator`	A visual separator between groups.

Properties

`EccUtilsDesignSelect`

Property	Type	Default	Description
`value`	`string`	`""`	The value of the currently selected option.
`disabled`	`boolean`	`false`	When `true`, disables the select.

`value`

Controls the currently selected option. Should match the value of one of the SelectItem components.

<EccUtilsDesignSelect value="apple">
  ...
</EccUtilsDesignSelect>

`disabled`

When true, disables the entire select, preventing user interaction.

<EccUtilsDesignSelect disabled={true}>
  ...
</EccUtilsDesignSelect>

`EccUtilsDesignSelectItem`

Property	Type	Default	Description
`value`	`string`	`""`	The unique value for this option.
`disabled`	`boolean`	`false`	When `true`, this option cannot be selected.

`value`

A unique identifier for the option. This value is used when the item is selected.

<EccUtilsDesignSelectItem value="apple">Apple</EccUtilsDesignSelectItem>

`disabled`

When true, prevents the option from being selected and visually indicates it's unavailable.

<EccUtilsDesignSelectItem value="premium" disabled={true}>Premium Option</EccUtilsDesignSelectItem>

`EccUtilsDesignSelectValue`

Property	Type	Default	Description
`placeholder`	`string`	`"Select an option"`	Text to display when no value is selected.

`placeholder`

Text displayed when no option is selected, providing guidance to users.

<EccUtilsDesignSelectValue placeholder="Choose a fruit..." />

Events

`EccUtilsDesignSelect`

Event Name	React Event Name	Detail Type	Description
`ecc-input-changed`	`onEccInputChanged`	`{ value: string }`	Fired when an option is selected.

`ecc-input-changed`

This event is fired when the user selects a new option from the dropdown.

<EccUtilsDesignSelect 
  onEccInputChanged={(event) => {
    console.log('Selected value:', event.detail.value);
  }}
>
  ...
</EccUtilsDesignSelect>

Collapsible Multi-Select