Component: Select Custom dropdown with animations and full control

Overview

• Custom dropdown UI
• Animated open / close
• Native select support (forms)
• Keyboard & accessibility friendly
• Fully customizable

Basic usage

Add data-anim-select to a native select element.

<select data-anim-select>

   <option value="0" selected>Select option</option>
   <option value="1">Item 1</option>
   <option value="2">Item 2</option>

</select>

How it works

1. Native select is hidden
2. Custom UI is generated
3. Options are rendered dynamically
4. Click updates value
5. Native change event is preserved

States

• Default — closed
• Open — dropdown visible
• Selected — active option highlighted
• Disabled — interaction blocked

Customization

You can fully customize the component using CSS classes.

.select__title {
   background: #000;
   color: #fff;
}

.select__option:hover {
   background: #ff3c3c;
}

Disabled state

Use native disabled attribute.

<select data-anim-select disabled></select>

Behavior

• Click to open / close
• Click option to select
• Click outside closes dropdown
• Selected value updates UI

Download

Use Select component in forms, filters, dashboards, and anywhere dropdown interaction is required.