This is the llms.txt documentation for the "selects" directory of the Origin UI - Svelte project.
# "selects" directory
> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.
This documentation covers 51 components, each following best practices for accessibility, performance, and type safety.
## Components
## select-01
> A type-safe, accessible select-01 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-01`
- **Location**: `/src/lib/components/selects/select-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-01.svelte)
## select-02
> A type-safe, accessible select-02 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-02`
- **Location**: `/src/lib/components/selects/select-02.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-02.svelte)
## select-03
> A type-safe, accessible select-03 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-03`
- **Location**: `/src/lib/components/selects/select-03.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-03.svelte)
## select-04
> A type-safe, accessible select-04 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-04`
- **Location**: `/src/lib/components/selects/select-04.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tell us what‘s your favorite
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-04.svelte)
## select-05
> A type-safe, accessible select-05 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-05`
- **Location**: `/src/lib/components/selects/select-05.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-05.svelte)
## select-06
> A type-safe, accessible select-06 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-06`
- **Location**: `/src/lib/components/selects/select-06.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Selected option is invalid
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-06.svelte)
## select-07
> A type-safe, accessible select-07 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-07`
- **Location**: `/src/lib/components/selects/select-07.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-07.svelte)
## select-08
> A type-safe, accessible select-08 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-08`
- **Location**: `/src/lib/components/selects/select-08.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-08.svelte)
## select-09
> A type-safe, accessible select-09 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-09`
- **Location**: `/src/lib/components/selects/select-09.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-09.svelte)
## select-10
> A type-safe, accessible select-10 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-10`
- **Location**: `/src/lib/components/selects/select-10.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-10.svelte)
## select-11
> A type-safe, accessible select-11 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-11`
- **Location**: `/src/lib/components/selects/select-11.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-11.svelte)
## select-12
> A type-safe, accessible select-12 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-12`
- **Location**: `/src/lib/components/selects/select-12.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each timezones as item (item.value)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-12.svelte)
## select-13
> A type-safe, accessible select-13 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-13`
- **Location**: `/src/lib/components/selects/select-13.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-13.svelte)
## select-14
> A type-safe, accessible select-14 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-14`
- **Location**: `/src/lib/components/selects/select-14.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-14.svelte)
## select-15
> A type-safe, accessible select-15 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-15`
- **Location**: `/src/lib/components/selects/select-15.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-15.svelte)
## select-16
> A type-safe, accessible select-16 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-16`
- **Location**: `/src/lib/components/selects/select-16.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-16.svelte)
## select-17
> A type-safe, accessible select-17 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-17`
- **Location**: `/src/lib/components/selects/select-17.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-17.svelte)
## select-18
> A type-safe, accessible select-18 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-18`
- **Location**: `/src/lib/components/selects/select-18.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
Tell us what‘s your favorite
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-18.svelte)
## select-19
> A type-safe, accessible select-19 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-19`
- **Location**: `/src/lib/components/selects/select-19.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-19.svelte)
## select-20
> A type-safe, accessible select-20 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-20`
- **Location**: `/src/lib/components/selects/select-20.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
Selected option is invalid
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-20.svelte)
## select-21
> A type-safe, accessible select-21 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-21`
- **Location**: `/src/lib/components/selects/select-21.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-21.svelte)
## select-22
> A type-safe, accessible select-22 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-22`
- **Location**: `/src/lib/components/selects/select-22.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-22.svelte)
## select-23
> A type-safe, accessible select-23 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-23`
- **Location**: `/src/lib/components/selects/select-23.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-23.svelte)
## select-24
> A type-safe, accessible select-24 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-24`
- **Location**: `/src/lib/components/selects/select-24.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-24.svelte)
## select-25
> A type-safe, accessible select-25 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-25`
- **Location**: `/src/lib/components/selects/select-25.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
Frontend
{#each frontend as item (item.value)}
{item.label}
{/each}
Backend
{#each backend as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-25.svelte)
## select-26
> A type-safe, accessible select-26 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-26`
- **Location**: `/src/lib/components/selects/select-26.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
Frontend
{#each frontend as item (item.value)}
{item.label}
{/each}
Backend
{#each backend as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-26.svelte)
## select-27
> A type-safe, accessible select-27 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-27`
- **Location**: `/src/lib/components/selects/select-27.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-27.svelte)
## select-28
> A type-safe, accessible select-28 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-28`
- **Location**: `/src/lib/components/selects/select-28.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-28.svelte)
## select-29
> A type-safe, accessible select-29 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-29`
- **Location**: `/src/lib/components/selects/select-29.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-29.svelte)
## select-30
> A type-safe, accessible select-30 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-30`
- **Location**: `/src/lib/components/selects/select-30.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a timezone'}
{#each timezones as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-30.svelte)
## select-31
> A type-safe, accessible select-31 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-31`
- **Location**: `/src/lib/components/selects/select-31.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a framework'}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-31.svelte)
## select-32
> A type-safe, accessible select-32 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-32`
- **Location**: `/src/lib/components/selects/select-32.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#snippet status(item: (typeof items)[number])}
{item.label}
{/snippet}
{#if selected}
{@render status(selected)}
{:else}
Select a status
{/if}
{#each items as item (item.value)}
{@render status(item)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-32.svelte)
## select-33
> A type-safe, accessible select-33 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-33`
- **Location**: `/src/lib/components/selects/select-33.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#if selected}
Language: {selected.label}
{:else}
Select a language
{/if}
{#each items as item (item.value)}
{item.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-33.svelte)
## select-34
> A type-safe, accessible select-34 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-34`
- **Location**: `/src/lib/components/selects/select-34.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet theme(item: (typeof items)[number])}
{item.label}
{/snippet}
{#if selected}
{@render theme(selected)}
{:else}
Select a theme
{/if}
{#each items as item (item.value)}
{@render theme(item)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-34.svelte)
## select-35
> A type-safe, accessible select-35 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-35`
- **Location**: `/src/lib/components/selects/select-35.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet theme(item: (typeof items)[number])}
{item.label}
{/snippet}
{#if selected}
{@render theme(selected)}
{:else}
Select a theme
{/if}
{#each items as item (item.value)}
{@render theme(item)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-35.svelte)
## select-36
> A type-safe, accessible select-36 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-36`
- **Location**: `/src/lib/components/selects/select-36.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{selected?.label ?? 'Select a plan'}
{#each items as item (item.value)}
{item.label}
{item.description}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-36.svelte)
## select-37
> A type-safe, accessible select-37 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-37`
- **Location**: `/src/lib/components/selects/select-37.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#snippet country(item: (typeof items)[number])}
{item.flag}{item.label}
{/snippet}
{#if selected}
{@render country(selected)}
{:else}
Select a country
{/if}
{#each continents as continent (continent.label)}
{continent.label}
{#each continent.countries as item (item.value)}
{@render country(item)}
{/each}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-37.svelte)
## select-38
> A type-safe, accessible select-38 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-38`
- **Location**: `/src/lib/components/selects/select-38.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
{#snippet user(item: (typeof items)[number])}
{item.name}
{/snippet}
span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0',
selected && 'ps-2'
)}
>
{#if selected}
{@render user(selected)}
{:else}
Select a user
{/if}
Impersonate user
{#each items as item (item.value)}
{@render user(item)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-38.svelte)
## select-39
> A type-safe, accessible select-39 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-39`
- **Location**: `/src/lib/components/selects/select-39.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#snippet user(item: (typeof items)[number])}
{item.name.charAt(0)}
{item.name}
{/snippet}
span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0',
selected && 'ps-2'
)}
>
{#if selected}
{@render user(selected)}
{:else}
Select a user
{/if}
Impersonate user
{#each items as item (item.value)}
{@render user(item)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-39.svelte)
## select-40
> A type-safe, accessible select-40 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-40`
- **Location**: `/src/lib/components/selects/select-40.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
{#snippet user(item: (typeof items)[number])}
{item.name}{item.username}
{/snippet}
span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0',
selected && 'ps-2'
)}
>
{#if selected}
{@render user(selected)}
{:else}
Select a user
{/if}
{#each items as item (item.value)}
{@render user(item)}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-40.svelte)
## select-41
> A type-safe, accessible select-41 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-41`
- **Location**: `/src/lib/components/selects/select-41.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
No framework found.
{#each frameworks as framework (framework.value)}
handleSelect(framework.value)}>
{framework.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-41.svelte)
## select-42
> A type-safe, accessible select-42 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-42`
- **Location**: `/src/lib/components/selects/select-42.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
No organization found.
{#each organizations as organization (organization.value)}
handleSelect(organization.value)}
>
{organization.label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-42.svelte)
## select-43
> A type-safe, accessible select-43 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-43`
- **Location**: `/src/lib/components/selects/select-43.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
No timezone found.
{#each formattedTimezones as { label, value: itemValue } (itemValue)}
handleSelect(itemValue)}>
{label}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-43.svelte)
## select-44
> A type-safe, accessible select-44 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-44`
- **Location**: `/src/lib/components/selects/select-44.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
No country found.
{#each countries as group (group.continent)}
{#each group.items as country (country.value)}
handleSelect(country.value)}>
{country.flag}
{country.value}
{/each}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-44.svelte)
## select-45
> A type-safe, accessible select-45 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-45`
- **Location**: `/src/lib/components/selects/select-45.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
No service found.
{#each items as item (item.value)}
handleSelect(item.value)}>
{item.label}
{item.number.toLocaleString()}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-45.svelte)
## select-46
> A type-safe, accessible select-46 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-46.todo`
- **Location**: `/src/lib/components/selects/select-46.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-46.todo.svelte)
## select-47
> A type-safe, accessible select-47 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-47.todo`
- **Location**: `/src/lib/components/selects/select-47.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-47.todo.svelte)
## select-48
> A type-safe, accessible select-48 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-48`
- **Location**: `/src/lib/components/selects/select-48.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-48.svelte)
## select-49
> A type-safe, accessible select-49 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-49.todo`
- **Location**: `/src/lib/components/selects/select-49.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-49.todo.svelte)
## select-50
> A type-safe, accessible select-50 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-50.todo`
- **Location**: `/src/lib/components/selects/select-50.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-50.todo.svelte)
## select-51
> A type-safe, accessible select-51 component for building modern UIs. This component is part of the selects collection.
### Core Information
- **Component ID**: `select-51.todo`
- **Location**: `/src/lib/components/selects/select-51.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/selects/select-51.todo.svelte)