Selection List

import { AXSelectionListModule } from '@acorex/components/selection-list';

Selection List component is a component for managing and presenting lists of items with configurable readonly and disabled modes, customizable look options and direction, show controler and flexibility in selection behavior.

Overview

In this section, you can test different options of this component and see the output in real time

Apple 🍏
Delicious Fruit
Orange 🍊
Delicious Fruit
Banana 🍌
Delicious Fruit
Kiwi 🥝
Delicious Fruit
Coconut 🥥
Delicious Fruit
Avocado 🥑
Delicious Fruit
Watermelon 🍉
Delicious Fruit

Direction

Vertical

Look

Card

Show Control

Multiple

Readonly

Disabled

Selected Items: [Banana 🍌]
Selected Value: 3

Usage

A simple example of using ax-selection-list

Preview

Code

Multiple

You can enable users to choose multiple items with multiple property.

Preview

Code

Hide Control

You can toggle control visibility with showControl property for a clean, intuitive interface.

Preview

Code

Direction

You can change the direction with direction property to integrate seamlessly with your design.

Preview

Code

Show Hint

You can display hints beneath each item by adding a hint property to each item object.

Preview

Code

Custom Template

You can pass templateRef as render template

Preview

Code