Introduction

Input component that allows users to choose one value from a list of options. This component has properties and behavior similar to the List component, but designed specifically for form input.

Notable features:

• Dropdown interface for space-efficient selection
• Field mapping to adapt to any data structure
• Placeholder text support for empty states
• Keyboard navigation and accessibility support
• Custom component rendering with `using` property
• Search and filtering capabilities

Basic Example

Here's a simple example of a Select component with placeholder text. Click to open the dropdown and select an option:

Properties

The Select component provides comprehensive properties for form integration and data adaptation.

Here's the basic usage with string options:

Field Mapping

Like other Rokkit components, Select can adapt to your data structure using field mappings. This allows you to use objects with custom property names instead of transforming your data.

Example of field mapping with objects:

Common Field Mappings

You can map various properties to customize how your data is displayed:

• text: The main display text
• image: Optional image for each option
• icon: Optional icon for each option
• value: The actual value when selected (defaults to the object itself)

Advanced Usage

The Select component supports advanced features like custom rendering, search functionality, and complex data structures.