128 lines
4.7 KiB
Markdown
128 lines
4.7 KiB
Markdown
# SbSimpleSelect
|
|
|
|
A dropdown select that uses **SbSelectOption** children instead of a data-bound list. Supports search, clear button, and generic value type (TValue).
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Value | TValue? | null | The selected value (two-way bindable) |
|
|
| ValueChanged | EventCallback\<TValue?\> | - | Callback when selection changes |
|
|
| ChildContent | RenderFragment? | null | SbSelectOption children defining the options |
|
|
| Label | string? | null | Label text displayed above the select |
|
|
| Placeholder | string? | null | Placeholder when no selection (when null, uses localized default) |
|
|
| SearchPlaceholder | string? | null | Placeholder for the search input when Searchable (when null, uses localized default) |
|
|
| NoResultsText | string? | null | Text when search has no results (when null, uses localized default) |
|
|
| Searchable | bool | false | Whether the dropdown is searchable |
|
|
| Clearable | bool | false | Whether to show a clear button when a value is selected |
|
|
| Disabled | bool | false | Whether the select is disabled |
|
|
| NoResultsTemplate | RenderFragment? | null | Custom template when search returns no results |
|
|
| Id | string? | null | Element ID for form association |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| ValueChanged | EventCallback\<TValue?\> | Fired when the selection changes |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-select-anchor` - Anchor container for dropdown positioning
|
|
- `sb-select-label` - Label element
|
|
- `sb-select-trigger` - Trigger wrapper
|
|
- `sb-select-trigger__main` - Button that opens the dropdown
|
|
- `sb-select-trigger__value` - Selected value display
|
|
- `sb-select-trigger__placeholder` - Placeholder text
|
|
- `sb-select-trigger__icon` - Chevron icon
|
|
- `sb-select-trigger__icon--open` - Icon when open
|
|
- `sb-select-trigger__clear` - Clear button
|
|
- `sb-select-dropdown` - Dropdown panel
|
|
- `sb-select-dropdown--flip-up` - Dropdown flips upward
|
|
- `sb-select-search` / `sb-select-search__input` - Search box
|
|
- `sb-select-options` - Options container
|
|
- `sb-select-option` - Option button
|
|
- `sb-select-option--selected` - Selected option
|
|
- `sb-select-option--disabled` - Disabled option
|
|
- `sb-select-empty` - No results state
|
|
|
|
## Accessibility
|
|
|
|
- Uses `role="listbox"` and `role="option"`
|
|
- `aria-selected` on options
|
|
- `aria-expanded` on trigger
|
|
- Keyboard: Enter/Space to open, Escape to close
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbSimpleSelect TValue="string" @bind-Value="selectedStatus" Label="Status">
|
|
<SbSelectOption TValue="string" Value="draft">Draft</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="published">Published</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="archived">Archived</SbSelectOption>
|
|
</SbSimpleSelect>
|
|
```
|
|
|
|
### With Placeholder and Clearable
|
|
|
|
```razor
|
|
<SbSimpleSelect TValue="string" @bind-Value="selectedCountry"
|
|
Label="Country"
|
|
Placeholder="Choose a country..."
|
|
Clearable="true">
|
|
<SbSelectOption TValue="string" Value="us">United States</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="uk">United Kingdom</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="ca">Canada</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="au">Australia</SbSelectOption>
|
|
</SbSimpleSelect>
|
|
```
|
|
|
|
### Searchable
|
|
|
|
```razor
|
|
<SbSimpleSelect TValue="string" @bind-Value="selectedItem"
|
|
Label="Search"
|
|
Searchable="true"
|
|
Placeholder="Type to search...">
|
|
<SbSelectOption TValue="string" Value="a">Apple</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="b">Banana</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="c">Cherry</SbSelectOption>
|
|
</SbSimpleSelect>
|
|
```
|
|
|
|
### Disabled Option
|
|
|
|
```razor
|
|
<SbSimpleSelect TValue="string" @bind-Value="selectedPlan" Label="Plan">
|
|
<SbSelectOption TValue="string" Value="free">Free</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="basic">Basic - $9/mo</SbSelectOption>
|
|
<SbSelectOption TValue="string" Value="pro" Disabled="true">Pro - Coming Soon</SbSelectOption>
|
|
</SbSimpleSelect>
|
|
```
|
|
|
|
### Disabled Select
|
|
|
|
```razor
|
|
<SbSimpleSelect TValue="string" @bind-Value="lockedValue"
|
|
Label="Status"
|
|
Disabled="true">
|
|
<SbSelectOption TValue="string" Value="active">Active</SbSelectOption>
|
|
</SbSimpleSelect>
|
|
```
|
|
|
|
### Dynamic Options
|
|
|
|
```razor
|
|
<SbSimpleSelect TValue="string" @bind-Value="selectedCategory" Label="Category">
|
|
@foreach (var category in categories)
|
|
{
|
|
<SbSelectOption TValue="string" Value="@category.Id">
|
|
@category.Name
|
|
</SbSelectOption>
|
|
}
|
|
</SbSimpleSelect>
|
|
```
|