<SYSTEM>This is the llms.txt documentation for the "selects" directory of the Origin UI - Svelte project.</SYSTEM>
# "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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Simple select (native)</Label>
<SelectNative id={uid}>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with placeholder (native)</Label>
<SelectNative id={uid}>
<option value="" disabled selected> Please select a value </option>
<option value="s1">1 to 5</option>
<option value="s2">5 to 10</option>
<option value="s3">More than 10</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
import Clock from 'lucide-svelte/icons/clock';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with icon (native)</Label>
<div class="group relative">
<SelectNative id={uid} class="ps-9">
<option value="s1">00:00 AM - 11:59 PM</option>
<option value="s2">01:00 AM - 12:59 PM</option>
<option value="s3">02:00 AM - 01:59 PM</option>
<option value="s4">03:00 AM - 02:59 PM</option>
</SelectNative>
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50"
>
<Clock size={16} strokeWidth={2} aria-hidden="true" />
</div>
</div>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with helper text (native)</Label>
<SelectNative id={uid}>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
<p class="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
Tell us what‘s your favorite
</p>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<!-- NOTE: This inline style is to show how to set the --ring variable in your CSS file in order to change the focus ring color. -->
<div class="space-y-2" style="--ring: 234 89% 74%">
<Label for={uid}>Select with colored border (native)</Label>
<SelectNative id={uid}>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2 [&_svg]:text-destructive/80">
<Label for={uid}>Select with error (native)</Label>
<SelectNative
id={uid}
class="border-destructive/80 text-destructive focus-visible:border-destructive/80 focus-visible:ring-destructive/20"
>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
<p class="mt-2 text-xs text-destructive" role="alert" aria-live="polite">
Selected option is invalid
</p>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with gray background (native)</Label>
<SelectNative id={uid} class="border-transparent bg-muted shadow-none">
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Disabled select (native)</Label>
<SelectNative id={uid} disabled>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>
Required select (native) <span class="text-destructive">*</span>
</Label>
<SelectNative id={uid}>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with auto-width (native)</Label>
<div class="w-fit">
<SelectNative id={uid}>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with option groups (native)</Label>
<SelectNative id={uid}>
<optgroup label="Frontend">
<option value="s1">Svelte</option>
<option value="s2">Vue</option>
<option value="s3">Angular</option>
</optgroup>
<optgroup label="Backend">
<option value="s4">Node.js</option>
<option value="s5">Python</option>
<option value="s6">Java</option>
</optgroup>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const timezones = Intl.supportedValuesOf('timeZone')
.map((timezone) => {
const formatter = new Intl.DateTimeFormat('en', {
timeZone: timezone,
timeZoneName: 'shortOffset'
});
const parts = formatter.formatToParts(new Date());
const offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';
const modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;
return {
label: `(${modifiedOffset}) ${timezone.replace(/_/g, ' ')}`,
numericOffset: parseInt(offset.replace('GMT', '').replace('+', '') || '0'),
value: timezone
};
})
.sort((a, b) => a.numericOffset - b.numericOffset);
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Timezone select (native)</Label>
<SelectNative id={uid}>
{#each timezones as item (item.value)}
<option value={item.value} selected={item.value == 'Europe/London'}>
{item.label}
</option>
{/each}
</SelectNative>
</div>
```
### 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
<script lang="ts">
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="group relative">
<label
for={uid}
class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-[select:disabled]:opacity-50"
>
Select with overlapping label (native)
</label>
<SelectNative id={uid}>
<option value="" disabled selected> Select framework </option>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div
class="relative rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[select:disabled]:cursor-not-allowed has-[select:disabled]:opacity-50 [&:has(select:is(:disabled))_*]:pointer-events-none"
>
<label for={uid} class="block px-3 pt-2 text-xs font-medium text-foreground">
Select with inset label (native)
</label>
<SelectNative
id={uid}
class="border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
>
<option value="" disabled selected> Select framework </option>
<option value="s1">Svelte</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
</SelectNative>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Simple select with default value</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with placeholder</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import Clock from 'lucide-svelte/icons/clock';
const items = [
{ label: '00:00 AM - 11:59 PM', value: 's1' },
{ label: '01:00 AM - 12:59 PM', value: 's2' },
{ label: '02:00 AM - 01:59 PM', value: 's3' },
{ label: '03:00 AM - 02:59 PM', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with icon</Label>
<Select.Root type="single" bind:value>
<Select.Trigger class="relative ps-9" id={uid}>
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50"
>
<Clock size={16} strokeWidth={2} aria-hidden="true" />
</div>
{selected?.label ?? 'Select a time'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s3');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with helper text</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
<p class="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
Tell us what‘s your favorite
</p>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<!-- NOTE: This inline style is to show how to set the --ring variable in your CSS file in order to change the focus ring color. -->
<div class="space-y-2" style="--ring: 234 89% 74%;">
<Label for={uid}>Select with colored border and ring</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2 [&_svg]:text-destructive/80">
<Label for={uid}>Select with error</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class="border-destructive/80 text-destructive focus:border-destructive/80 focus:ring-destructive/20"
>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
<p class="mt-2 text-xs text-destructive" role="alert" aria-live="polite">
Selected option is invalid
</p>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s2');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with gray background</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid} class="border-transparent bg-muted shadow-none">
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Disabled select</Label>
<Select.Root type="single" bind:value disabled>
<Select.Trigger id={uid}>{selected?.label ?? 'Select a framework'}</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s4');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>
Required select <span class="text-destructive">*</span>
</Label>
<Select.Root type="single" bind:value required>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with auto-width</Label>
<Select.Root type="single" bind:value>
<!-- Adjust the min-width to fit the longest option -->
<Select.Trigger id={uid} class="w-auto min-w-48 max-w-full">
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const frontend = [
{ label: 'Svelte', value: 's1' },
{ label: 'Vue', value: 's2' },
{ label: 'Angular', value: 's3' }
] as const;
const backend = [
{ label: 'Node.js', value: 's4' },
{ label: 'Python', value: 's5' },
{ label: 'Java', value: 's6' }
] as const;
const items = [...frontend, ...backend];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with options groups</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.GroupHeading>Frontend</Select.GroupHeading>
{#each frontend as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Group>
<Select.Group>
<Select.GroupHeading>Backend</Select.GroupHeading>
{#each backend as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const frontend = [
{ label: 'Svelte', value: 's1' },
{ label: 'Vue', value: 's2' },
{ label: 'Angular', value: 's3' }
] as const;
const backend = [
{ label: 'Node.js', value: 's4' },
{ label: 'Python', value: 's5' },
{ label: 'Java', value: 's6' }
] as const;
const items = [...frontend, ...backend];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with separator</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.GroupHeading>Frontend</Select.GroupHeading>
{#each frontend as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.GroupHeading>Backend</Select.GroupHeading>
{#each backend as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ disabled: true, label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ disabled: true, label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s2');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with disabled options</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value} disabled={item.disabled}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
] as const;
let value = $state('');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="group relative">
<Label
for={uid}
class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-[:disabled]:opacity-50"
>Select with overlapping label</Label
>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
] as const;
let value = $state('');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div
class="relative rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none"
>
<label for={uid} class="block px-3 pt-2 text-xs font-medium text-foreground">
Select with inset label
</label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class="border-none bg-transparent shadow-none focus:ring-0 focus:ring-offset-0"
>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const timezones = Intl.supportedValuesOf('timeZone')
.map((timezone) => {
const formatter = new Intl.DateTimeFormat('en', {
timeZone: timezone,
timeZoneName: 'shortOffset'
});
const parts = formatter.formatToParts(new Date());
const offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';
const modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;
return {
label: `(${modifiedOffset}) ${timezone.replace(/_/g, ' ')}`,
numericOffset: parseInt(offset.replace('GMT', '').replace('+', '') || '0'),
value: timezone
};
})
.sort((a, b) => a.numericOffset - b.numericOffset);
let value = $state('Europe/London');
const selected = $derived(timezones.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Timezone select</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a timezone'}
</Select.Trigger>
<Select.Content>
{#each timezones as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Svelte', value: 's1' },
{ label: 'Next.js', value: 's2' },
{ label: 'Astro', value: 's3' },
{ label: 'Gatsby', value: 's4' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with right indicator</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a framework'}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ class: 'text-emerald-600', label: 'Completed', value: 's1' },
{ class: 'text-blue-500', label: 'In Progress', value: 's2' },
{ class: 'text-amber-500', label: 'Pending', value: 's3' },
{ class: 'text-gray-500', label: 'Cancelled', value: 's4' },
{ class: 'text-red-500', label: 'Failed', value: 's5' }
] as const;
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet status(item: (typeof items)[number])}
<span class="flex items-center gap-2">
<svg
width="8"
height="8"
fill="currentColor"
viewBox="0 0 8 8"
xmlns="http://www.w3.org/2000/svg"
class={item.class}
aria-hidden="true"
>
<circle cx="4" cy="4" r="4" />
</svg>
<span class="truncate">{item.label}</span>
</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Status select</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0"
>
{#if selected}
{@render status(selected)}
{:else}
Select a status
{/if}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span>svg]:shrink-0 [&_*[data-select-item]>span>svg]:text-muted-foreground/80 [&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]>span]:flex [&_*[data-select-item]>span]:items-center [&_*[data-select-item]>span]:gap-2 [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{@render status(item)}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ label: 'Javascript', value: 's1' },
{ label: 'Bash', value: 's2' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with left text</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{#if selected}
Language: {selected.label}
{:else}
Select a language
{/if}
</Select.Trigger>
<Select.Content>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import MonitorCog from 'lucide-svelte/icons/monitor-cog';
import Moon from 'lucide-svelte/icons/moon';
import Sun from 'lucide-svelte/icons/sun';
const items = [
{ icon: Sun, label: 'Light', value: 's1' },
{ icon: Moon, label: 'Dark', value: 's2' },
{ icon: MonitorCog, label: 'System', value: 's3' }
] as const;
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet theme(item: (typeof items)[number])}
<item.icon size={16} aria-hidden="true" />
<span class="truncate">{item.label}</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Options with icon</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80"
>
{#if selected}
{@render theme(selected)}
{:else}
Select a theme
{/if}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span>svg]:shrink-0 [&_*[data-select-item]>span>svg]:text-muted-foreground/80 [&_*[data-select-item]>span]:flex [&_*[data-select-item]>span]:gap-2"
>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{@render theme(item)}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import MonitorCog from 'lucide-svelte/icons/monitor-cog';
import Moon from 'lucide-svelte/icons/moon';
import Sun from 'lucide-svelte/icons/sun';
const items = [
{ icon: Sun, label: 'Light', value: 's1' },
{ icon: Moon, label: 'Dark', value: 's2' },
{ icon: MonitorCog, label: 'System', value: 's3' }
];
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet theme(item: (typeof items)[number])}
<item.icon size={16} aria-hidden="true" />
<span class="truncate">{item.label}</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Options with icon and right indicator</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80"
>
{#if selected}
{@render theme(selected)}
{:else}
Select a theme
{/if}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span>svg]:shrink-0 [&_*[data-select-item]>span>svg]:text-muted-foreground/80 [&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]>span]:flex [&_*[data-select-item]>span]:items-center [&_*[data-select-item]>span]:gap-2 [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{@render theme(item)}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const items = [
{ description: 'Ideal for individuals', label: 'Standard Plan', value: 's1' },
{ description: 'For professional users', label: 'Pro Plan', value: 's2' },
{ description: 'Built for large teams', label: 'Enterprise Plan', value: 's3' }
] as const;
let value = $state('s2');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Select with description and right indicator</Label>
<Select.Root type="single" bind:value>
<Select.Trigger id={uid}>
{selected?.label ?? 'Select a plan'}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{item.label}
<span class="mt-1 block text-xs text-muted-foreground">
{item.description}
</span>
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
const continents = [
{
countries: [
{ flag: '🇺🇸', label: 'United States', value: 's1' },
{ flag: '🇨🇦', label: 'Canada', value: 's2' },
{ flag: '🇲🇽', label: 'Mexico', value: 's3' }
],
label: 'America'
},
{
countries: [
{ flag: '🇿🇦', label: 'South Africa', value: 's4' },
{ flag: '🇳🇬', label: 'Nigeria', value: 's5' },
{ flag: '🇲🇦', label: 'Morocco', value: 's6' }
],
label: 'Africa'
},
{
countries: [
{ flag: '🇨🇳', label: 'China', value: 's7' },
{ flag: '🇯🇵', label: 'Japan', value: 's8' },
{ flag: '🇮🇳', label: 'India', value: 's9' }
],
label: 'Asia'
},
{
countries: [
{ flag: '🇬🇧', label: 'United Kingdom', value: 's10' },
{ flag: '🇫🇷', label: 'France', value: 's11' },
{ flag: '🇩🇪', label: 'Germany', value: 's12' }
],
label: 'Europe'
},
{
countries: [
{ flag: '🇦🇺', label: 'Australia', value: 's13' },
{ flag: '🇳🇿', label: 'New Zealand', value: 's14' }
],
label: 'Oceania'
}
] as const;
const items = continents.reduce<(typeof continents)[number]['countries'][number][]>(
(previous, current) => [...previous, ...current.countries],
[]
);
let value = $state('s2');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet country(item: (typeof items)[number])}
<span class="mr-1 text-lg leading-none">{item.flag}</span>
<span class="truncate">{item.label}</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Options with flag</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80"
>
<span>
{#if selected}
{@render country(selected)}
{:else}
Select a country
{/if}
</span>
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span>svg]:shrink-0 [&_*[data-select-item]>span>svg]:text-muted-foreground/80 [&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]>span]:flex [&_*[data-select-item]>span]:items-center [&_*[data-select-item]>span]:gap-2 [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
{#each continents as continent (continent.label)}
<Select.Group>
<Select.GroupHeading class="ps-2">
{continent.label}
</Select.GroupHeading>
{#each continent.countries as item (item.value)}
<Select.Item value={item.value}>
{@render country(item)}
</Select.Item>
{/each}
</Select.Group>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import { cn } from '$lib/utils.js';
import Avatar01 from '$lib/assets/avatar-40-01.jpg?w=40&h=40&enhanced';
import Avatar02 from '$lib/assets/avatar-40-02.jpg?w=40&h=40&enhanced';
import Avatar03 from '$lib/assets/avatar-40-03.jpg?w=40&h=40&enhanced';
const items = [
{ avatar: Avatar01, name: 'Jenny Hamilton', value: 's1' },
{ avatar: Avatar02, name: 'Paul Smith', value: 's2' },
{ avatar: Avatar03, name: 'Luna Wyen', value: 's3' }
] as const;
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet user(item: (typeof items)[number])}
<enhanced:img class="size-5 rounded" src={item.avatar} alt={item.name} />
<span class="truncate">{item.name}</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Options with avatar</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class={cn(
'[&>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}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]>span]:flex [&_*[data-select-item]>span]:items-center [&_*[data-select-item]>span]:gap-2 [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
<Select.Group>
<Select.GroupHeading class="ps-2">Impersonate user</Select.GroupHeading>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{@render user(item)}
</Select.Item>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import { cn } from '$lib/utils.js';
const items = [
{ class: 'bg-indigo-400/20 text-indigo-500', name: 'Frank Morris', value: 's1' },
{ class: 'bg-purple-400/20 text-purple-500', name: 'Xavier Guerra', value: 's2' },
{ class: 'bg-rose-400/20 text-rose-500', name: 'Anne Kelley', value: 's3' }
] as const;
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet user(item: (typeof items)[number])}
<span
data-square
class={cn(
'flex size-5 items-center justify-center rounded bg-muted text-xs font-medium text-muted-foreground',
item.class
)}
aria-hidden="true"
>
{item.name.charAt(0)}
</span>
<span class="truncate">{item.name}</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Options with placeholder avatar</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class={cn(
'[&>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}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]>span]:flex [&_*[data-select-item]>span]:items-center [&_*[data-select-item]>span]:gap-2 [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
<Select.Group>
<Select.GroupHeading class="ps-2">Impersonate user</Select.GroupHeading>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{@render user(item)}
</Select.Item>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import { cn } from '$lib/utils.js';
import Avatar01 from '$lib/assets/avatar-40-01.jpg?w=80&h=80&enhanced';
import Avatar02 from '$lib/assets/avatar-40-02.jpg?w=80&h=80&enhanced';
import Avatar03 from '$lib/assets/avatar-40-03.jpg?w=80&h=80&enhanced';
const items = [
{ avatar: Avatar01, name: 'Jenny Hamilton', username: '@jennycodes', value: 's1' },
{ avatar: Avatar02, name: 'Paul Smith', username: '@paulsmith', value: 's2' },
{ avatar: Avatar03, name: 'Luna Wyen', username: '@wyen.luna', value: 's3' }
] as const;
let value = $state('s1');
const selected = $derived(items.find((i) => i.value === value));
const uid = $props.id();
</script>
{#snippet user(item: (typeof items)[number])}
<span class="flex items-center gap-2">
<enhanced:img class=" size-10 rounded-full" src={item.avatar} alt={item.name} />
<span>
<span class="block font-medium">{item.name}</span>
<span class="mt-0.5 block text-xs text-muted-foreground">{item.username}</span>
</span>
</span>
{/snippet}
<div class="space-y-2">
<Label for={uid}>Options with portrait</Label>
<Select.Root type="single" bind:value>
<Select.Trigger
id={uid}
class={cn(
'h-auto [&>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}
</Select.Trigger>
<Select.Content
class="[&_*[data-select-item]>span]:end-2 [&_*[data-select-item]>span]:start-auto [&_*[data-select-item]]:pe-8 [&_*[data-select-item]]:ps-2"
>
{#each items as item (item.value)}
<Select.Item value={item.value}>
{@render user(item)}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
```
### 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
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Label from '$lib/components/ui/label.svelte';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import { cn } from '$lib/utils';
import Check from 'lucide-svelte/icons/check';
import ChevronDown from 'lucide-svelte/icons/chevron-down';
let open = $state(false);
let value = $state('');
const frameworks = [
{ label: 'SvelteKit', value: 'sveltekit' },
{ label: 'Svelte', value: 'svelte' },
{ label: 'Nuxt.js', value: 'nuxt.js' },
{ label: 'Remix', value: 'remix' },
{ label: 'Astro', value: 'astro' },
{ label: 'Angular', value: 'angular' },
{ label: 'Vue.js', value: 'vue' },
{ label: 'Ember.js', value: 'ember' },
{ label: 'Gatsby', value: 'gatsby' },
{ label: 'Eleventy', value: 'eleventy' },
{ label: 'SolidJS', value: 'solid' },
{ label: 'Preact', value: 'preact' },
{ label: 'Qwik', value: 'qwik' },
{ label: 'Next.js', value: 'next.js' },
{ label: 'Alpine.js', value: 'alpine' },
{ label: 'Lit', value: 'lit' }
] as const;
function handleSelect(currentValue: string) {
value = currentValue === value ? '' : currentValue;
open = false;
}
</script>
<div class="space-y-2">
<Label>Select with search</Label>
<Popover.Root bind:open>
<Popover.Trigger>
{#snippet child({ props })}
<Button
variant="outline"
role="combobox"
aria-expanded={open}
class="w-full justify-between bg-background px-3 font-normal outline-offset-0 hover:bg-background focus-visible:border-ring focus-visible:outline-[3px] focus-visible:outline-ring/20"
{...props}
>
<span class={cn('truncate', !value && 'text-muted-foreground')}>
{#if value}
{frameworks.find((framework) => framework.value === value)?.label}
{:else}
Select framework
{/if}
</span>
<ChevronDown
size={16}
stroke-width={2}
class="shrink-0 text-muted-foreground/80"
aria-hidden="true"
/>
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-full min-w-[var(--bits-popover-anchor-width)] p-0" align="start">
<Command.Root>
<Command.Input placeholder="Search framework..." />
<Command.List>
<Command.Empty>No framework found.</Command.Empty>
<Command.Group>
{#each frameworks as framework (framework.value)}
<Command.Item value={framework.value} onSelect={() => handleSelect(framework.value)}>
{framework.label}
<Check
class={cn('ml-auto', value === framework.value ? 'opacity-100' : 'opacity-0')}
/>
</Command.Item>
{/each}
</Command.Group>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
</div>
```
### 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
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Label from '$lib/components/ui/label.svelte';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import { cn } from '$lib/utils';
import Check from 'lucide-svelte/icons/check';
import ChevronDown from 'lucide-svelte/icons/chevron-down';
import Plus from 'lucide-svelte/icons/plus';
let open = $state(false);
let value = $state('originui');
const organizations = [
{
label: 'Origin UI - Svelte',
value: 'originui'
},
{
label: 'Bits UI',
value: 'bitsui'
}
] as const;
function handleSelect(currentValue: string) {
value = currentValue === value ? '' : currentValue;
open = false;
}
</script>
<div class="space-y-2">
<Label>Select with search and button</Label>
<Popover.Root bind:open>
<Popover.Trigger>
{#snippet child({ props })}
<Button
variant="outline"
role="combobox"
aria-expanded={open}
class="w-full justify-between bg-background px-3 font-normal outline-offset-0 hover:bg-background focus-visible:border-ring focus-visible:outline-[3px] focus-visible:outline-ring/20"
{...props}
>
<span class={cn('truncate', !value && 'text-muted-foreground')}>
{#if value}
{organizations.find((organization) => organization.value === value)?.label}
{:else}
Select organization
{/if}
</span>
<ChevronDown
size={16}
stroke-width={2}
class="shrink-0 text-muted-foreground/80"
aria-hidden="true"
/>
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-full min-w-[var(--bits-popover-anchor-width)] p-0" align="start">
<Command.Root>
<Command.Input placeholder="Find organization" />
<Command.List>
<Command.Empty>No organization found.</Command.Empty>
<Command.Group>
{#each organizations as organization (organization.value)}
<Command.Item
value={organization.value}
onSelect={() => handleSelect(organization.value)}
>
{organization.label}
<Check
class={cn('ml-auto', value === organization.value ? 'opacity-100' : 'opacity-0')}
/>
</Command.Item>
{/each}
</Command.Group>
<Command.Separator />
<Command.Group>
<Button variant="ghost" class="w-full justify-start font-normal">
<Plus size={16} stroke-width={2} class="-ms-2 me-2 opacity-60" aria-hidden="true" />
New organization
</Button>
</Command.Group>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
</div>
```
### 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
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Label from '$lib/components/ui/label.svelte';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import { cn } from '$lib/utils';
import Check from 'lucide-svelte/icons/check';
import ChevronDown from 'lucide-svelte/icons/chevron-down';
let open = $state(false);
let value = $state('Europe/Berlin');
const timezones = Intl.supportedValuesOf('timeZone');
const formattedTimezones = timezones
.map((timezone) => {
const formatter = new Intl.DateTimeFormat('en', {
timeZone: timezone,
timeZoneName: 'shortOffset'
});
const parts = formatter.formatToParts(new Date());
const offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';
const modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;
return {
label: `(${modifiedOffset}) ${timezone.replace(/_/g, ' ')}`,
numericOffset: parseInt(offset.replace('GMT', '').replace('+', '') || '0'),
value: timezone
};
})
.sort((a, b) => a.numericOffset - b.numericOffset);
function handleSelect(currentValue: string) {
value = currentValue === value ? '' : currentValue;
open = false;
}
function filterFn(value: string, search: string) {
const normalizedValue = value.toLowerCase();
const normalizedSearch = search.toLowerCase().replace(/\s+/g, '');
return normalizedValue.includes(normalizedSearch) ? 1 : 0;
}
</script>
<div class="space-y-2">
<Label>Timezone select with search</Label>
<Popover.Root bind:open>
<Popover.Trigger>
{#snippet child({ props })}
<Button
variant="outline"
role="combobox"
aria-expanded={open}
class="w-full justify-between bg-background px-3 font-normal outline-offset-0 hover:bg-background focus-visible:border-ring focus-visible:outline-[3px] focus-visible:outline-ring/20"
{...props}
>
<span class={cn('truncate', !value && 'text-muted-foreground')}>
{#if value}
{formattedTimezones.find((timezone) => timezone.value === value)?.label}
{:else}
Select timezone
{/if}
</span>
<ChevronDown
size={16}
stroke-width={2}
class="shrink-0 text-muted-foreground/80"
aria-hidden="true"
/>
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-full min-w-[var(--bits-popover-anchor-width)] p-0" align="start">
<Command.Root filter={filterFn}>
<Command.Input placeholder="Search timezone..." />
<Command.List>
<Command.Empty>No timezone found.</Command.Empty>
<Command.Group>
{#each formattedTimezones as { label, value: itemValue } (itemValue)}
<Command.Item value={itemValue} onSelect={() => handleSelect(itemValue)}>
{label}
<Check class={cn('ml-auto', value === itemValue ? 'opacity-100' : 'opacity-0')} />
</Command.Item>
{/each}
</Command.Group>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
</div>
```
### 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
<script module lang="ts">
</script>
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Label from '$lib/components/ui/label.svelte';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import { cn } from '$lib/utils';
import Check from 'lucide-svelte/icons/check';
import ChevronDown from 'lucide-svelte/icons/chevron-down';
let open = $state(false);
let value = $state('');
const countries = [
{
continent: 'Europe',
items: [
{ flag: '🇩🇪', value: 'Germany' },
{ flag: '🇬🇧', value: 'United Kingdom' },
{ flag: '🇫🇷', value: 'France' }
]
},
{
continent: 'America',
items: [
{ flag: '🇺🇸', value: 'United States' },
{ flag: '🇨🇦', value: 'Canada' },
{ flag: '🇲🇽', value: 'Mexico' }
]
},
{
continent: 'Africa',
items: [
{ flag: '🇿🇦', value: 'South Africa' },
{ flag: '🇳🇬', value: 'Nigeria' },
{ flag: '🇲🇦', value: 'Morocco' }
]
},
{
continent: 'Asia',
items: [
{ flag: '🇨🇳', value: 'China' },
{ flag: '🇯🇵', value: 'Japan' },
{ flag: '🇮🇳', value: 'India' }
]
},
{
continent: 'Oceania',
items: [
{ flag: '🇦🇺', value: 'Australia' },
{ flag: '🇳🇿', value: 'New Zealand' }
]
}
] as const;
const selectedCountry = $derived.by(() => {
const items = countries.flatMap<(typeof countries)[number]['items'][number]>(
(group) => group.items
);
return items.find((item) => item.value === value);
});
function handleSelect(currentValue: string) {
value = currentValue;
open = false;
}
</script>
<div class="space-y-2">
<Label>Options with flag and search</Label>
<Popover.Root bind:open>
<Popover.Trigger>
{#snippet child({ props })}
<Button
variant="outline"
role="combobox"
aria-expanded={open}
class="w-full justify-between bg-background px-3 font-normal outline-offset-0 hover:bg-background focus-visible:border-ring focus-visible:outline-[3px] focus-visible:outline-ring/20"
{...props}
>
{#if value && selectedCountry}
<span class="flex min-w-0 items-center gap-2">
<span class="text-lg leading-none">{selectedCountry.flag}</span>
<span class="truncate">{value}</span>
</span>
{:else}
<span class="text-muted-foreground">Select country</span>
{/if}
<ChevronDown
size={16}
stroke-width={2}
class="shrink-0 text-muted-foreground/80"
aria-hidden="true"
/>
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-full min-w-[var(--bits-popover-anchor-width)] p-0" align="start">
<Command.Root>
<Command.Input placeholder="Search country..." />
<Command.List>
<Command.Empty>No country found.</Command.Empty>
{#each countries as group (group.continent)}
<Command.Group heading={group.continent}>
{#each group.items as country (country.value)}
<Command.Item value={country.value} onSelect={() => handleSelect(country.value)}>
<span class="text-lg leading-none">{country.flag}</span>
{country.value}
<Check
class={cn('ml-auto', value === country.value ? 'opacity-100' : 'opacity-0')}
/>
</Command.Item>
{/each}
</Command.Group>
{/each}
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
</div>
```
### 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
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Label from '$lib/components/ui/label.svelte';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import Blocks from 'lucide-svelte/icons/blocks';
import Brain from 'lucide-svelte/icons/brain';
import LineChart from 'lucide-svelte/icons/chart-line';
import ChevronDown from 'lucide-svelte/icons/chevron-down';
import Cpu from 'lucide-svelte/icons/cpu';
import Database from 'lucide-svelte/icons/database';
import Globe from 'lucide-svelte/icons/globe';
import Layout from 'lucide-svelte/icons/layout-template';
import Network from 'lucide-svelte/icons/network';
import Search from 'lucide-svelte/icons/search';
import Server from 'lucide-svelte/icons/server';
let open = $state(false);
let value = $state('');
const items = [
{
icon: LineChart,
label: 'Analytics Platform',
number: 2451,
value: 'analytics platform'
},
{
icon: Brain,
label: 'AI Services',
number: 1832,
value: 'ai services'
},
{
icon: Database,
label: 'Database Systems',
number: 1654,
value: 'database systems'
},
{
icon: Cpu,
label: 'Compute Resources',
number: 943,
value: 'compute resources'
},
{
icon: Network,
label: 'Network Services',
number: 832,
value: 'network services'
},
{
icon: Globe,
label: 'Web Services',
number: 654,
value: 'web services'
},
{
icon: Search,
label: 'Monitoring Tools',
number: 432,
value: 'monitoring tools'
},
{
icon: Server,
label: 'Server Management',
number: 321,
value: 'server management'
},
{
icon: Blocks,
label: 'Infrastructure',
number: 234,
value: 'infrastructure'
},
{
icon: Layout,
label: 'Frontend Services',
number: 123,
value: 'frontend services'
}
] as const;
const selectedItem = $derived(items.find((item) => item.value === value));
function handleSelect(currentValue: string) {
value = currentValue;
open = false;
}
</script>
<div class="space-y-2">
<Label>Options with icon and number</Label>
<Popover.Root bind:open>
<Popover.Trigger>
{#snippet child({ props })}
<Button
variant="outline"
role="combobox"
aria-expanded={open}
class="w-full justify-between bg-background px-3 font-normal outline-offset-0 hover:bg-background focus-visible:border-ring focus-visible:outline-[3px] focus-visible:outline-ring/20"
{...props}
>
{#if value && selectedItem}
{@const IconComponent = selectedItem.icon}
<span class="flex min-w-0 items-center gap-2">
<IconComponent class="h-4 w-4 text-muted-foreground" />
<span class="truncate">{selectedItem.label}</span>
</span>
{:else}
<span class="text-muted-foreground">Select service category</span>
{/if}
<ChevronDown
size={16}
stroke-width={2}
class="shrink-0 text-muted-foreground/80"
aria-hidden="true"
/>
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-full min-w-[var(--bits-popover-anchor-width)] p-0" align="start">
<Command.Root>
<Command.Input placeholder="Search services..." />
<Command.List>
<Command.Empty>No service found.</Command.Empty>
<Command.Group>
{#each items as item (item.value)}
<Command.Item value={item.value} onSelect={() => handleSelect(item.value)}>
<div class="flex items-center gap-2">
<item.icon class="h-4 w-4 text-muted-foreground" />
{item.label}
</div>
<span class="text-xs text-muted-foreground">
{item.number.toLocaleString()}
</span>
</Command.Item>
{/each}
</Command.Group>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
</div>
```
### 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
<script lang="ts">
import Label from '$lib/components/ui/label.svelte';
import SelectNative from '$lib/components/ui/select-native.svelte';
const uid = $props.id();
</script>
<div class="space-y-2">
<Label for={uid}>Multiple select (native)</Label>
<div class="overflow-hidden rounded-lg border border-input">
<SelectNative id={uid} class="rounded-none border-none" multiple value="">
<option value="s1">React</option>
<option value="s2">Next.js</option>
<option value="s3">Astro</option>
<option value="s4">Gatsby</option>
<option value="s5">Vue</option>
<option value="s6">Angular</option>
</SelectNative>
</div>
</div>
```
### 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)