Selectable
A versatile and highly customizable Ionic component that replaces Ionic Select with search, async search, item creation, and template customization.
What is Selectable?
Ionic Selectable is an open-source UI component for Ionic applications that enhances the standard select dropdown with advanced features like search, async search, item creation, and customizable templates. It solves the limitation of the native Ionic Select by providing a versatile and highly customizable interface for handling complex selection scenarios in mobile and web apps.
Ionic developers building mobile or progressive web applications who need a robust, feature-rich select component beyond the basic Ionic Select, especially those working with large datasets or requiring custom item management.
Developers choose Ionic Selectable for its extensive feature set, intuitive API, and seamless integration with Ionic frameworks, offering a reliable and flexible alternative that saves development time and enhances user experience in selection interfaces.
Overview
Ionic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.
Use Cases
Best For
- Implementing searchable dropdowns with live filtering in Ionic apps
- Building forms that require selection from large datasets with async loading
- Creating interfaces where users need to add or edit items directly in a select component
- Developing mobile apps with complex multi-select functionality
- Customizing the look and feel of select dropdowns beyond Ionic's default styles
- Handling grouped or categorized selection items in Angular-based Ionic projects
Not Ideal For
- Projects not using Ionic or Angular, as framework support for other ecosystems is limited or still in development
- Simple selection interfaces where the native Ionic Select meets all requirements without added complexity or bundle size
- Applications requiring zero-dependency, lightweight components, as this adds features that increase overhead
- Teams needing immediate, out-of-the-box compatibility with React or Vue without custom integration work
Pros & Cons
Pros
Supports real-time filtering and asynchronous data fetching during search, making it ideal for dynamic datasets as shown in the live demos.
Integrates with Ionic's InfiniteScroll and VirtualScroll for handling large lists, and works with Angular forms for both reactive and template-driven approaches.
Allows adding, editing, and deleting items directly within the component interface, enhancing user interactivity without extra navigation.
Provides customizable templates for items and groups, enabling developers to tailor the appearance beyond Ionic's default styles.
Cons
v5 is labeled as alpha, indicating potential bugs and breaking changes that could disrupt production use, as noted in the README.
Full support is only for Angular and Vanilla JS, with other frameworks 'coming', restricting adoption in diverse tech stacks.
Requires module imports and configuration, especially for lazy-loaded pages or non-Angular setups, adding to initial development time.
Frequently Asked Questions
Related Projects
Dynamic FormsRapid form development library for Angular
Form Generator based on JSONHTML form generation based on JSON Schema
AutocompleteIonic 2 autocomplete component
Masksbrmasker-ionic is an input masking library designed specifically for Ionic 4 and Angular applications. It provides a directive to format user input in real-time according to common Brazilian conventions, such as CPF/CNPJ, phone numbers, currency, and percentages. ## Key Features - **Brazilian Format Support** — Pre-configured masks for CPF, CNPJ, phone numbers (with/without DDD), and Brazilian Real currency. - **Custom Mask Patterns** — Define custom masks using patterns like '00:00' for time or any alphanumeric format. - **Flexible Configuration** — Options for decimal places, thousand separators, and handling user-entered special characters. - **Directive Integration** — Easily apply masks to Ionic input elements via the `[brmasker]` directive. - **Programmatic Masking** — Use the `BrMaskDirective` to format values programmatically in TypeScript. ## Philosophy It focuses on simplifying the implementation of Brazilian-specific input formatting in Ionic 4 apps, reducing boilerplate code for developers.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.