Select Scrollable

A customizable and accessible select dropdown with scrollable content.

Introduction

The Select Scrollable component extends the functionality of the Select component to handle long lists of options. It provides a scrollable dropdown for better usability and supports labels, groups, and keyboard navigation.

Installation

Install the select component:

npx axionjs-ui add select

File Structure

select.tsx

Prop Types

Prop	Type	Default
`value`	`string`	-
`placeholder`	`string`	-
`className`	`string`	-
`children`	`ReactNode`	-
`onChange`	`(value: string) => void`	-

Features

Scrollable Groups:
- Organize large lists into scrollable groups with labels.
Keyboard Navigation:
- Full support for keyboard users.
ARIA Accessibility:
- Implements ARIA roles and attributes for screen readers.

Accessibility

Keyboard Support:
- Navigate the dropdown using Tab and arrow keys.
ARIA Attributes:
- Properly labeled groups, items, and separators.
Screen Reader Support:
- Fully accessible for assistive technologies.

Conclusion

The Select Scrollable component is ideal for dropdowns with extensive content, offering both scrollable and accessible features.