# Select

**Path:** Components/Form Inputs

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

---

Select

 RbSelect component provides a dropdown select with filtering, virtualization, icons, and custom value/text selectors for flexible data binding.

 Basic Usage

 Simple select dropdowns with string and object data sources.

 Show code

 Select Fruit 

 Select Number 

 With Placeholder 

 With Clear Button 

 Selected Fruit: Apple

 Selected Number: 5

 Selected Color: 

 Selected Size: Medium

 Variants

 Different visual styles: Default, Outlined and Filled variants.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Default 

 Outlined 

 Filled 

 Required Field

 Mark select inputs as required with asterisk indicator for all variants.

 Show code

 Default Required 

 Outlined Required 

 Filled Required 

 With Icons

 Display icons in dropdown items.

 Show code

 With Same Icon 

 With Dynamic Icons 

 With Same Icon: Apple

 With Dynamic Icons: Banana

 Filterable

 Enable filtering to search through large lists of options.

 Show code

 Filterable Countries 

 Filterable Cities (Large List) 

 Selected Country: United States

 Selected City: New York

 Custom Selectors

 Use TextSelector and ValueSelector for complex object binding.

 Show code

 Select Person 

 Select Product 

 Selected Person ID: 1

 Selected Person: John Doe

 Selected Product Code: PROD001

 Selected Product: Laptop

 Disabled Items

 Disable specific items using DisabledSelector function.

 Show code

 Even Numbers Disabled 

 Some Fruits Disabled 

 Selected Number: 1 (Even numbers are disabled)

 Selected Fruit: Apple (Banana and Date are disabled)

 BodyClick Mode

 Click anywhere on the input to open dropdown. Input is readonly to prevent manual typing.

 Show code

 Click to Open 

 BodyClick with Icons 

 Selected Option: Option A

 Selected Priority: Medium

 Readonly & Disabled

 Control input interaction states with Readonly and Disabled parameters.

 Show code

 Normal 

 Readonly 

 Disabled 

 Normal: Option 1

 Readonly: Option 2

 Disabled: Option 3

 RTL Support

 Use the component inside an RTL container with localized labels and values.

 Show code

 نوع الطلب 

 الحالة 

 ✕

 Contents