Class

TelerikSelectBase<TItem, TValue>

Declaration

protected TelerikSelectBase()

Controls how the dropdown adapts its behavior and appearance across different devices and screen sizes. Auto automatically switches between desktop and mobile layouts based on device detection and viewport size. None always uses the desktop layout with standard dropdown behavior regardless of device. Auto mode shows mobile-optimized bottom sheets on touch devices and standard popups on desktop for optimal user experience.

Declaration

[Parameter]
public AdaptiveMode AdaptiveMode { get; set; }

Property Value

References the IDs of elements that provide additional descriptive information about this dropdown for accessibility. Use to link help text, validation messages, format requirements, or other explanatory content. Provide space-separated IDs of elements containing relevant descriptions, such as "country-help validation-msg". Helps screen readers provide comprehensive context about the dropdown's purpose and requirements.

Declaration

[Parameter]
public virtual string AriaDescribedBy { get; set; }

Property Value

Provides an accessible label that describes the dropdown's purpose for screen readers and assistive technologies. Use when no visible label element exists, describing what the dropdown is for in clear, concise language. Example: "Country of residence", "Product category filter", "Sort order selection". Alternative to AriaLabelledBy when you want to embed the label directly rather than reference an external element.

Declaration

[Parameter]
public string AriaLabel { get; set; }

Property Value

References the ID of an element that labels this dropdown, establishing an accessible relationship for screen readers. Use when a visible label, heading, or descriptive text exists elsewhere in the DOM that describes this dropdown's purpose. Provide the ID of the labeling element, such as "country-label" or "filter-heading". Alternative to AriaLabel when the label content exists in a separate element.

Declaration

[Parameter]
public string AriaLabelledBy { get; set; }

Property Value

Declaration

[CascadingParameter]
public EditContext CascadedEditContext { get; set; }

Property Value

Controls whether users can interact with the dropdown component. When false, the dropdown appears grayed out, cannot receive focus, and users cannot open it or trigger any events. Use to temporarily prevent user input while maintaining the visual presence of the component during loading states or conditional workflows. The component automatically removes itself from the tab order when disabled for proper keyboard navigation.

Declaration

[Parameter]
public bool Enabled { get; set; }

Property Value

Controls the visual styling approach for the dropdown input field borders and background. "solid" provides a filled background with visible borders - recommended for most business applications and forms. "outline" shows only border outlines with transparent background - ideal for modern design systems and light backgrounds. "flat" removes most visual styling for a minimalist appearance - perfect for compact interfaces and custom designs. Use consistent fill modes across related form elements for cohesive visual hierarchy.

Declaration

[Parameter]
public string FillMode { get; set; }

Property Value

Enables real-time filtering of dropdown items as users type in the input field. When enabled, users can type to quickly find and select items from large datasets. Filtering searches through the TextField property values using the FilterOperator strategy. Performance tip: Works best with collections under 1000 items for optimal responsiveness, or use OnRead for server-side filtering.

Declaration

[Parameter]
public bool Filterable { get; set; }

Property Value

Declaration

[CascadingParameter]
public TelerikFloatingLabel FloatingLabel { get; set; }

Property Value

Customizes the content displayed at the bottom of the dropdown list after all data items. Use for action buttons, summary information, pagination controls, or links to manage the underlying data. Example: Add "Add new item" button, show total count, provide "Manage list" link, or display loading indicators. The footer remains visible when scrolling and appears below all data items and group content. Children: allows arbitrary content including HTML elements, components, and interactive controls.

Declaration

[Parameter]
public RenderFragment FooterTemplate { get; set; }

Property Value

Specifies which property of the data items to use for organizing related items into visual groups in the dropdown. Must match a public property name on the TItem objects that returns the group identifier or name. Groups are displayed with headers in the dropdown list, making it easier to navigate large datasets with logical categories. Example: Group employees by "Department", products by "Category", or locations by "Region".

Declaration

[Parameter]
public string GroupField { get; set; }

Property Value

Customizes the content displayed at the top of the dropdown list before any data items. Use for instructions, search controls, action buttons, or contextual information that helps users understand their options. Example: Add "Select multiple items" instruction, show current filter status, or provide quick action buttons. The header remains visible when scrolling through items and appears above any group headers. Children: allows arbitrary content including HTML elements, components, and interactive controls.

Declaration

[Parameter]
public RenderFragment HeaderTemplate { get; set; }

Property Value

Sets a unique identifier for the dropdown component, used for accessibility, form integration, and DOM manipulation. When not specified, a unique ID is automatically generated to ensure proper ARIA relationships and label associations. Use meaningful IDs that describe the dropdown's purpose, such as "country-selector" or "product-category". Required for proper accessibility when using external labels via AriaLabelledBy.

Declaration

[Parameter]
public string Id { get; set; }

Property Value

Specifies the input mode hint for virtual keyboards on mobile devices, optimizing the keyboard layout for the expected input type. Examples: "numeric" for numbers, "email" for email addresses, "search" for search fields, "text" for general text. While dropdowns are primarily selection-based, this affects the keyboard when Filterable is enabled. Use "search" when filtering is the primary interaction to show an optimized search keyboard layout.

Declaration

[Parameter]
public string InputMode { get; set; }

Property Value

Sets the height in pixels for each item in the dropdown list when using virtual scrolling. Required when ScrollMode is set to Virtual for proper scroll calculations. Must be a consistent value that matches the actual rendered height of your items including padding and borders. Example: Use 32 for standard list items, 48 for larger touch-friendly items, or custom values matching your item template. Incorrect values will cause misalignment between the scrollbar and actual content positioning.

Declaration

[Parameter]
public decimal ItemHeight { get; set; }

Property Value

Customizes the content displayed when the dropdown list has no data items to show. Provides user guidance when data is empty, still loading, or completely filtered out. Example: "No items available", "Loading data...", "No results found for your search", or actionable content like "Add the first item". Helps prevent user confusion when dropdowns appear empty and provides clear next steps. Children: allows arbitrary content including HTML elements, components, and interactive controls.

Declaration

[Parameter]
public RenderFragment NoDataTemplate { get; set; }

Property Value

Fires when the dropdown component loses focus, indicating the user has moved to another element. Use for cleanup operations, saving intermediate changes, updating related UI components, or form validation. Commonly used with OnChange to implement different behaviors for confirmed vs. abandoned interactions. Essential for implementing proper focus management in complex forms and workflows.

Declaration

[Parameter]
public EventCallback OnBlur { get; set; }

Property Value

Fires when the user confirms their selection through explicit actions like pressing Enter or when the component loses focus. Provides both the new value and additional context about how the change was committed. Use for validation, saving changes, or triggering workflows that should only execute on confirmed user actions. Unlike ValueChanged, this does not fire during programmatic value changes or intermediate selection states.

Declaration

[Parameter]
public EventCallback<object> OnChange { get; set; }

Property Value

Sets the number of items to render in each virtual scrolling page when ScrollMode is Virtual. Determines how many items are loaded and rendered at once as users scroll through large datasets. Higher values (50-100) provide smoother scrolling but use more memory and processing power. Lower values (10-25) use less resources but may show loading delays during rapid scrolling. Recommended range: 20-50 items for optimal balance of performance and user experience.

Declaration

[Parameter]
public int PageSize { get; set; }

Property Value

Declaration

protected bool ProcessingData { get; }

Property Value

Controls whether users can modify the dropdown input by typing or if it's restricted to selection-only interaction. When true, users cannot type in the input field but can still open the dropdown and select items using mouse or keyboard. Use for dropdowns where typing might cause confusion or when you want to restrict input to predefined options only. Note: When true, Filterable functionality is automatically disabled since typing is not allowed.

Declaration

[Parameter]
public bool ReadOnly { get; set; }

Property Value

Sets the border radius styling for the dropdown component using predefined theme values. "small" provides subtle rounding for conservative designs and professional applications. "medium" offers balanced rounding suitable for most modern interfaces and design systems. "large" creates more pronounced rounding for contemporary, friendly user interfaces. "full" applies maximum rounding for pill-shaped inputs in creative or mobile-first designs.

Declaration

[Parameter]
public string Rounded { get; set; }

Property Value

Controls how the dropdown handles scrolling through large datasets for optimal performance. Scrollable renders all items with standard scrolling - best for datasets under 500 items. Virtual renders only visible items for improved performance - essential for datasets over 1000 items. Virtual scrolling requires both ItemHeight and PageSize to be configured for proper operation. Use virtual scrolling with OnRead for server-side data loading of very large datasets.

Declaration

[Parameter]
public DropDownScrollMode ScrollMode { get; set; }

Property Value

Controls the overall size and spacing of the dropdown component using predefined theme values. "small" creates compact dropdowns suitable for dense layouts, data tables, and space-constrained interfaces. "medium" provides standard sizing with good balance of usability and space efficiency for most applications. "large" offers generous sizing with enhanced touch targets, ideal for mobile interfaces and accessibility. Size affects padding, font size, and overall component dimensions while maintaining proper proportions.

Declaration

[Parameter]
public string Size { get; set; }

Property Value

Sets the subtitle text displayed below the main title in the popup header when using adaptive mobile layouts. Only visible when AdaptiveMode is set to Auto and the component adapts to mobile view. Provides additional context or instructions for the selection, complementing the main Title. Example: "Required field", "Multiple selections allowed", "Affects pricing calculation".

Declaration

[Parameter]
public string Subtitle { get; set; }

Property Value

The TabIndex of the component.

Declaration

[Parameter]
public int? TabIndex { get; set; }

Property Value

Declaration

public virtual string TextField { get; set; }

Property Value

Sets the main title text displayed in the popup header when using adaptive mobile layouts. Only visible when AdaptiveMode is set to Auto and the component adapts to mobile view. Provides context about the selection being made, helping users understand the dropdown's purpose in mobile interfaces. Example: "Select Country", "Choose Category", "Pick Date Range".

Declaration

[Parameter]
public string Title { get; set; }

Property Value

Gets or sets the currently selected value using two-way data binding. The value type must match the TValue generic parameter and the type of the property specified in ValueField. For primitive data types (string, int), this directly contains the selected item value. For complex objects, this contains the value from the property specified by ValueField. Use @bind-Value for automatic two-way binding with ValueChanged for custom handling.

Declaration

[Parameter]
public TValue Value { get; set; }

Property Value

Fires immediately when the selected value changes, providing the new value for validation, business logic, or dependent component updates. Executes during both user interactions (clicking, typing) and programmatic value changes (binding updates). Use for immediate response to value changes, such as filtering other dropdowns, updating calculations, or triggering validation. For access to both old and new values with additional context, use OnChange instead.

Declaration

[Parameter]
public EventCallback<TValue> ValueChanged { get; set; }

Property Value

Provides an expression that identifies the bound value property for form validation and model binding. Required for integration with EditForm validation, enabling automatic validation message display and form state tracking. Use with @bind-Value to establish two-way binding: ValueExpression="@(() => MyModel.SelectedValue)". Essential for proper validation attribute processing and validation message association.

Declaration

[Parameter]
public Expression<Func<TValue>> ValueExpression { get; set; }

Property Value

Specifies which property of the data items to use as the actual value for selection and binding. Must match a public property name on the TItem objects in Data. The property type must match TValue for proper two-way binding with Value. Example: For a Person object, use "Id" to bind to integer IDs while displaying "Name" as text via TextField.

Declaration

[Parameter]
public string ValueField { get; set; }

Property Value

Sets the width of the dropdown component using CSS units. Examples: "200px", "15rem", "50%", "auto", "min-content". When not specified, the dropdown adapts to its content and container constraints. Use specific pixel values for consistent layouts, percentage values for responsive designs, or "auto" to fit content.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Closes the suggestion list of the component.

Declaration

public void Close()

Declaration

protected virtual void DebounceChangeValue(string value)

Parameters

Declaration

public override void Dispose()

Overrides DataBoundComponent<TItem>.Dispose()

Moves focus to the component.

Declaration

public Task FocusAsync()

Returns

Declaration

protected override Task OnInitializedAsync()

Returns

Overrides BaseComponent.OnInitializedAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Overrides DataBoundComponent<TItem>.OnParametersSetAsync()

Opens the suggestion list of the component.

Declaration

public void Open()

Re-renders the component.

Declaration

public void Refresh()