# List

**Path:** Components/Data Display

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

List

 RbList is a versatile component for displaying scrollable lists of items with built-in filtering,
 keyboard navigation, selection states, and customizable styling. Perfect for menus, navigation lists,
 file browsers, and any scenario requiring list-based interfaces.

 Basic Usage

 Simple lists with text items and basic selection.

 Show code

 Simple String List

 Selected: None

 List with Custom Objects

 Selected Person: 
 None

 Multiple Lists

 Categories 

 Items 

 Category: None

 Item: None

 With Icons

 Lists with icons for visual identification.

 Show code

 List with Icon Class

 Action: None

 Custom Icon per Item

 Selected: None

 Icon Only (No Labels)

 Icon Only Mode: 

 Labels are hidden but tooltips are enabled. Hover over icons to see names.

 Filterable Lists

 Search and filter list items in real-time.

 Show code

 Filterable Country List

 Instructions: 

 Type in the search box to filter countries

 Use arrow keys to navigate

 Press Enter to select

 Selected: None

 Filterable with Icons

 Selected Contact: 
 None

 Large Dataset with Filter

 Dataset Info: 

 Total items: 500

 Filtering helps quickly find items in large lists.

 Variants & Styles

 Normal, Filled, and Outlined variants with different colors.

 Show code

 Variant Comparison

 Normal 

 Filled 

 Outlined 

 Color Options

 Primary 

 Success 

 Info 

 Warning 

 Danger 

 Advanced Features

 Disabled items, keyboard navigation, custom selectors, and tooltips.

 Show code

 Disabled Items

 Try clicking items: 

 Disabled items (with strikethrough) cannot be selected.

 Keyboard Navigation

 Keyboard Controls: 

 Arrow Up/Down: Navigate items

 Enter: Select focused item

 Type: Filter items in real-time

 With Tooltips

 Hover over items to see tooltips with full names.

 Readonly & Disabled States

 Normal 

 Readonly 

 Disabled 

 Dynamic Data with Observable Collection

 Add

 Remove Last

 Dynamic List: 

 Total items: 3

 Add or remove items to see the list update automatically.

 Advanced Configuration

 Available Features: 

 Filterable: Built-in search with highlighting

 Keyboard Navigation: Arrow keys and Enter support

 Custom Selectors: SelectedSelector, DisabledSelector

 Tooltips: Show full text on hover

 Variants: Normal, Filled, Outlined styles

 Sizes: Small, Default, Large

 Icon Positions: Top, Bottom, Left, Right

 Alignment: Start, Center, End

 States: Readonly, Disabled, per-item disabled

 RTL Support

 Show list selection and detail rendering inside a local RTL container with Arabic labels and mixed reference codes.

 Show code

 قائمة الطلبات المفتوحة

 اختر عنصرا من القائمة.

 ✕

 Contents