Basic usage

Single selection

Multiple selection

<BOBInputDropdown @bind-Value="_basicSingle" Label="Single" HelperText="Single selection">
    <DropdownOption TOption="int" Value="1">Option 1</DropdownOption>
    <DropdownOption TOption="int" Value="2">Option 2</DropdownOption>
    <DropdownOption TOption="int" Value="3">Option 3</DropdownOption>
    <DropdownOption TOption="int" Value="4">Option 4</DropdownOption>
</BOBInputDropdown>

<BOBInputDropdown @bind-Value="_basicMulti" Label="Multi" HelperText="Multiple selection">
    <DropdownOption TOption="int" Value="1">Option 1</DropdownOption>
    <DropdownOption TOption="int" Value="2">Option 2</DropdownOption>
    <DropdownOption TOption="int" Value="3">Option 3</DropdownOption>
    <DropdownOption TOption="int" Value="4">Option 4</DropdownOption>
</BOBInputDropdown>

Variants

<BOBInputDropdown @bind-Value="_outlinedValue"
                  Label="Outlined"
                  Variant="BOBInputVariant.Outlined">
    @foreach (string option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_filledValue"
                  Label="Filled"
                  Variant="BOBInputVariant.Filled">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_standardValue"
                  Label="Standard"
                  Variant="BOBInputVariant.Standard">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>

Sizes

<BOBInputDropdown @bind-Value="_smallValue" Label="Small" Size="BOBSize.Small">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_mediumValue" Label="Medium (Default)" Size="BOBSize.Medium">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_largeValue" Label="Large" Size="BOBSize.Large">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>

Color & Background

<BOBInputDropdown @bind-Value="_colorValue" Label="Custom Color & Background" Color="@PaletteColor.Secondary" BackgroundColor="@PaletteColor.SecondaryContrast">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>

Box Placement

Placement supports Top, Bottom, TopStart, TopEnd, BottomStart, BottomEnd or Auto

Auto mode will position the box in the bottom if it has space. Otherwise it will position the box on top.

<BOBInputDropdown @bind-Value="_bottomValue"
                  Label="Bottom Placement (Default)"
                  Placement="DropdownPlacement.Bottom">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_topValue"
                  Label="Top Placement"
                  Placement="DropdownPlacement.Top">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_autoValue"
                  Label="Auto Placement"
                  Placement="DropdownPlacement.Auto">
    @foreach (var option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>

Searchable

Set Searchable to filter options by typing.

<BOBInputDropdown TValue="string" @bind-Value="_searchable" Label="Country" Searchable="true" SearchPlaceholder="Type a country...">
    <DropdownOption TOption="string" Value="@("us")">United States</DropdownOption>
    <DropdownOption TOption="string" Value="@("mx")">Mexico</DropdownOption>
    <DropdownOption TOption="string" Value="@("ca")">Canada</DropdownOption>
    <DropdownOption TOption="string" Value="@("br")">Brazil</DropdownOption>
    <DropdownOption TOption="string" Value="@("ar")">Argentina</DropdownOption>
    <DropdownOption TOption="string" Value="@("es")">Spain</DropdownOption>
    <DropdownOption TOption="string" Value="@("fr")">France</DropdownOption>
    <DropdownOption TOption="string" Value="@("de")">Germany</DropdownOption>
    <DropdownOption TOption="string" Value="@("uk")">United Kingdom</DropdownOption>
    <DropdownOption TOption="string" Value="@("jp")">Japan</DropdownOption>
</BOBInputDropdown>

Custom template when there are not items.

<BOBInputDropdown TValue="string"
                  @bind-Value="_noOptionsValue"
                  Label="Empty Dropdown">
    <NoOptionsTemplate>
        <span>No items available</span>
    </NoOptionsTemplate>
</BOBInputDropdown>

Shadow

<BOBInputDropdown @bind-Value="_shadowValue" Variant="BOBInputVariant.Outlined" Label="Elevation Shadow"
                  Shadow="@BOBShadowPresets.Elevation(2)">
    @foreach (string option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_shadowValue" Variant="BOBInputVariant.Outlined" Label="Custom Shadow"
                  Shadow="@(ShadowStyle.Create(5, 10, 0.14f, color: "purple"))">
    @foreach (string option in _optionsStrings)
    {
        <DropdownOption Value="@option" Text="@option" />
    }
</BOBInputDropdown>

States

Required

Disabled

ReadOnly

<BOBInputDropdown @bind-Value="_requiredValue" Label="Required" Required="true" HelperText="Required">
    <DropdownOption TOption="int" Value="1">Option 1</DropdownOption>
    <DropdownOption TOption="int" Value="2" Disabled="true">Option 2</DropdownOption>
    <DropdownOption TOption="int" Value="3" Disabled="true">Option 3</DropdownOption>
    <DropdownOption TOption="int" Value="4">Option 4</DropdownOption>
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_disabledValue" Label="Disabled" Disabled="true" HelperText="Disabled">
    <DropdownOption TOption="int" Value="1">Option 1</DropdownOption>
    <DropdownOption TOption="int" Value="2" Disabled="true">Option 2</DropdownOption>
    <DropdownOption TOption="int" Value="3" Disabled="true">Option 3</DropdownOption>
    <DropdownOption TOption="int" Value="4">Option 4</DropdownOption>
</BOBInputDropdown>
<BOBInputDropdown @bind-Value="_readOnlyValue" Label="Read Only" ReadOnly="true" HelperText="ReadOnly">
    <DropdownOption TOption="int" Value="1">Option 1</DropdownOption>
    <DropdownOption TOption="int" Value="2" Disabled="true">Option 2</DropdownOption>
    <DropdownOption TOption="int" Value="3" Disabled="true">Option 3</DropdownOption>
    <DropdownOption TOption="int" Value="4">Option 4</DropdownOption>
</BOBInputDropdown>

Disabled options

<BOBInputDropdown TValue="int?" @bind-Value="_disabledOptionValue" Label="With disabled options">
    <DropdownOption TOption="int" Value="1">Option 1</DropdownOption>
    <DropdownOption TOption="int" Value="2" Disabled="true">Option 2</DropdownOption>
    <DropdownOption TOption="int" Value="3" Disabled="true">Option 3</DropdownOption>
    <DropdownOption TOption="int" Value="4">Option 4</DropdownOption>
</BOBInputDropdown>

Properties

Property	Type	Default	Description
`Value`	`TValue?`		Current value of the dropdown.
`ValueChanged`	`EventCallback<TValue>`		Raised when the selected value changes.
`ValueExpression`	`Expression<Func<TValue>>?`		Expression used to identify the bound value for validation.
`Variant`	`BOBInputVariant`	`BOBInputVariant.Outlined`	Visual variant of the input field.
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the dropdown.
`FullWidth`	`bool`		When , the dropdown spans the full width of its container.
`Disabled`	`bool`		When , the dropdown is non-interactive.
`IsLoading`	`bool`		When , the dropdown shows a loading indicator.
`LoadingIndicatorVariant`	`BOBLoadingIndicatorVariant?`		Variant of the loading indicator shown when is .
`Required`	`bool`		When , a value must be selected.
`ReadOnly`	`bool`		When , the value cannot be changed.
`Density`	`BOBDensity`	`BOBDensity.Standard`	Vertical density (gap) of the input.
`Shadow`	`ShadowStyle?`		Shadow style applied to the input container.
`Color`	`string?`		Text color of the dropdown. Accepts any valid CSS color value.
`BackgroundColor`	`string?`		Background color of the dropdown. Accepts any valid CSS color value.
`ChildContent`	`RenderFragment?`		Content rendered inside the dropdown, typically <BOBOption> items.
`Placeholder`	`string?`		Placeholder text shown when no option is selected.
`Label`	`string?`		Floating label displayed above the input when a value is selected or focused.
`HelperText`	`string?`		Helper text displayed below the input for additional context.
`CloseOnSelect`	`bool`	`true`	When , the menu closes after selecting an option.
`Placement`	`DropdownPlacement`	`DropdownPlacement.Auto`	Preferred placement of the dropdown menu relative to the input.
`Searchable`	`bool`		When , a search box is rendered at the top of the menu.
`SearchPlaceholder`	`string`	`"Search..."`	Placeholder text for the search box.
`SearchMode`	`SearchMode`	`SearchMode.Smart`	Algorithm used to filter options while searching.
`ShowSelectAll`	`bool`	`true`	When and in multi-select mode, shows buttons to select or deselect all options.
`SelectAllText`	`string`	`"Select All"`	Label of the "Select All" button.
`DeselectAllText`	`string`	`"Deselect All"`	Label of the "Deselect All" button.
`NoOptionsTemplate`	`RenderFragment?`		Custom template rendered when the dropdown has no options.
`NoResultsTemplate`	`RenderFragment<NoResultsContext>?`		Custom template rendered when a search yields no results.