Overview
DittoSingleSelect is a unified single-select component that replaces GroupedSingleSelect. It supports optional grouping (flat list by default), optional search, icons on options and groups, and size variants. Perfect for filtering, categorized selection, or simple dropdowns.
Key Features
- Optional grouping - flat list when groups omitted
- Optional search filtering (opt-in via searchable prop)
- Icons on options and group headers
- Clearable selection with clear button
- Size variants (default, sm)
- Collapsible group headers when grouped
When to Use
Use DittoSingleSelect when users need to select a single option from a list. Add groups to organize options into categories. Enable search for lists with many options.
Skip When
- Multiple selections needed -> Use DittoMultiSelect
- Visual card selection -> Use CardPicker
- 2-4 exclusive options -> Use CardToggle
Interactive Examples
Grouped Selection
Select from options organized into collapsible groups with icons.
Selected: null
Flat List (No Groups)
Simple flat list when groups are not provided.
Selected: apple
With Search
Opt-in search filtering with the searchable prop.
Selected: null
Disabled State
Size Variants
Default
Small
Interfaces
DittoSelectOption
| Prop | Type | Description |
|---|---|---|
value | string | Unique identifier for the option |
label | string | Display label |
icon | IconDefinition? | Optional Font Awesome icon |
groupId | string? | Parent group ID (only when using groups) |
disabled | boolean? | Disable this option |
DittoSelectGroup
| Prop | Type | Description |
|---|---|---|
id | string | Unique identifier for the group |
label | string | Display label for the group header |
icon | IconDefinition? | Optional icon for the group header |
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
options | DittoSelectOption[] | required | Array of selectable options |
groups | DittoSelectGroup[] | - | Optional groups for categorizing options |
value | string | null | required | Currently selected option value (null if none) |
onChange | (value: string | null) => void | required | Callback when selection changes |
placeholder | string | Select... | Text shown when nothing is selected |
searchable | boolean | false | Enable search filtering |
searchPlaceholder | string | Search... | Placeholder for search input |
clearable | boolean | false | Show clear button when value selected |
size | 'sm' | 'default' | 'default' | Size variant |
disabled | boolean | false | Disable all interactions |
className | string | - | Additional CSS classes for the trigger button |
Usage
import {
DittoSingleSelect,
type DittoSelectOption,
type DittoSelectGroup
} from '@/ui/components';
import { faGlobe, faBuilding, faChartSimple } from '@fortawesome/duotone-regular-svg-icons';
// Define options (flat array)
const options: DittoSelectOption[] = [
{ value: 'survey', label: 'Survey', icon: faChartSimple, groupId: 'system' },
{ value: 'checklist', label: 'Checklist', groupId: 'program' },
];
// Define groups (optional - omit for flat list)
const groups: DittoSelectGroup[] = [
{ id: 'system', label: 'System Templates', icon: faGlobe },
{ id: 'program', label: 'Program Templates', icon: faBuilding },
];
// Usage
const [selected, setSelected] = useState<string | null>(null);
<DittoSingleSelect
options={options}
groups={groups} // Optional - flat list if omitted
value={selected}
onChange={setSelected}
placeholder="Filter by type..."
searchable // Optional - opt-in search
clearable // Optional - clear button
/>