Select

Input

Interactive dropdown for choosing a value with keyboard navigation.

@using Spectre.Console
@using RazorConsole.Components

<Select TItem="string" Options="@options" Value="@selectedValue" FocusedValue="@focusedValue"
    FocusedValueChanged="@((v) => focusedValue = v)" ValueChanged="@((v) => selectedValue = v)"
    Placeholder="Choose an option" />
@* add helper text *@
<Rows>
    <Markup Content="@($"Selected: {selectedValue ?? "None"}")" Foreground="Color.Yellow" />
    <Markup Content="@($"Focused: {focusedValue ?? "None"}")" Foreground="Color.Cyan" />
    <Newline />
    <Markup Content="Use arrow keys to navigate and Enter to select." Foreground="Color.Green" />
</Rows>
@code {
    private string[] options = new[] { "Option 1", "Option 2", "Option 3" };
    private string? selectedValue;

    private string? focusedValue;
}

Parameters

17
NameTypeDefaultDescription
Behavior
FocusedValue<TItem>—Currently highlighted option during keyboard navigation (may differ from committed Value).
IsFocusedBoolean—Indicates whether the select currently has focus.
SelectedIndicatorChar—Character used to indicate the focused option.
SelectedOptionDecorationDecoration—Text decoration for the focused option.
UnselectedIndicatorChar—Character used to indicate non-focused options.
Appearance
OptionForegroundColor—Foreground color for non-focused options.
SelectedOptionForegroundColor—Foreground color for the focused option.
Events
FocusedValueChangedEventCallback<TItem>—Event raised when the focused option changes.
IsFocusedChangedEventCallback<Boolean>—Event raised when the focus state changes.
ValueChangedEventCallback<TItem>—Event raised when the committed value changes.
Common
Value<TItem>—Currently committed option value.
Other
AdditionalAttributesIReadOnlyDictionary<String, Object>—Additional attributes to apply to the root element.
ComparerIEqualityComparer<TItem>—Custom comparer for items in the list. Default is object.Equals()
ExpandBoolean—Expands the rows layout to fill available space when true.
FormatterSystem.Func<{TItem>,System.String}—Custom formatter for the items in the list. Default is object.ToString()
OptionDecorationDecoration—Text decoration for non-focused options.
Options<TItem>[]—Available options rendered by the select.

API

<Select>