Select

A component that allows users to choose from a list of options in a dropdown.

Show Code

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
import {createListCollection} from '@destyler-ui/vue'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
</script>

<template>
  <Select.Root :collection="collection" :openDelay="0" :closeDelay="0">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>ChevronDownIcon</Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner data-testid="positioner">
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item.value" :item="item">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
          <Select.List />
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

interface BasicProps {
  disabled?: boolean
  multiple?: boolean
  onValueChange?: (value: string[]) => void
  onOpenChange?: (open: boolean) => void
  readOnly?: boolean
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic(props: BasicProps) {
  return (
    <Select.Root
      collection={collection}
      disabled={props.disabled}
      multiple={props.multiple}
      onValueChange={props.onValueChange}
      onOpenChange={props.onOpenChange}
      readOnly={props.readOnly}
      lazyMount={props.lazyMount}
      unmountOnExit={props.unmountOnExit}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>ChevronDownIcon</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Select.Positioner data-testid="positioner">
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {collection.items.map(item => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
          <Select.List />
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid/select'
import { Index, Portal } from 'solid-js/web'

export function Basic() {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  return (
    <Select.Root collection={collection}>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>▼</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              <Index each={collection.items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item()}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

<script module lang="ts">
  import type { SelectRootProps } from '@destyler-ui/svelte'

  type Framework = { label: string, value: string, disabled?: boolean }
  export interface BasicProps extends Omit<SelectRootProps<Framework>, 'collection'> {}
</script>

<script lang="ts">
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  const collection = createListCollection<Framework>({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
</script>

<Select.Root {collection} {...props}>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>ChevronDownIcon</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <Select.Positioner data-testid="positioner">
    <Select.Content>
      <Select.ItemGroup>
        <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Select.Item {item}>
            <Select.ItemText>{item.label}</Select.ItemText>
            <Select.ItemIndicator>✓</Select.ItemIndicator>
          </Select.Item>
        {/each}
      </Select.ItemGroup>
      <Select.List />
    </Select.Content>
  </Select.Positioner>
  <Select.HiddenSelect />
</Select.Root>

Anatomy

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
</script>

<template>
  <Select.Root>
    <Select.Label />
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText />
        <Select.Indicator />
      </Select.Trigger>
      <Select.ClearTrigger />
    </Select.Control>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel />
          <Select.Item>
            <Select.ItemText />
            <Select.ItemIndicator />
          </Select.Item>
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
    <Select.HiddenSelect />
  </Select.Root>
</template>

import { Select } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Select.Root>
      <Select.Label />
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText />
          <Select.Indicator />
        </Select.Trigger>
        <Select.ClearTrigger />
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel />
            <Select.Item>
              <Select.ItemText />
              <Select.ItemIndicator />
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid'

const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

export default function Basic() {
  return (
    <Select.Root collection={collection}>
      <Select.Label />
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText />
          <Select.Indicator />
        </Select.Trigger>
        <Select.ClearTrigger />
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel />
            <Select.Item item={collection.items[0]}>
              <Select.ItemText>{collection.items[0]}</Select.ItemText>
              <Select.ItemIndicator />
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

<script lang="ts">
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte' },
    ],
  })
</script>

<Select.Root {collection}>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a framework" />
      <Select.Indicator>⌄</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <Select.Positioner>
    <Select.Content>
      <Select.ItemGroup>
        <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Select.Item {item}>
            <Select.ItemText>{item.label}</Select.ItemText>
            <Select.ItemIndicator>✓</Select.ItemIndicator>
          </Select.Item>
        {/each}
      </Select.ItemGroup>
    </Select.Content>
  </Select.Positioner>
  <Select.HiddenSelect />
</Select.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
import {createListCollection} from '@destyler-ui/vue'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
</script>

<template>
  <Select.Root :collection="collection" :openDelay="0" :closeDelay="0">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>ChevronDownIcon</Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner data-testid="positioner">
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item.value" :item="item">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
          <Select.List />
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

interface BasicProps {
  disabled?: boolean
  multiple?: boolean
  onValueChange?: (value: string[]) => void
  onOpenChange?: (open: boolean) => void
  readOnly?: boolean
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic(props: BasicProps) {
  return (
    <Select.Root
      collection={collection}
      disabled={props.disabled}
      multiple={props.multiple}
      onValueChange={props.onValueChange}
      onOpenChange={props.onOpenChange}
      readOnly={props.readOnly}
      lazyMount={props.lazyMount}
      unmountOnExit={props.unmountOnExit}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>ChevronDownIcon</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Select.Positioner data-testid="positioner">
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {collection.items.map(item => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
          <Select.List />
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid/select'
import { Index, Portal } from 'solid-js/web'

export function Basic() {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  return (
    <Select.Root collection={collection}>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>▼</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              <Index each={collection.items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item()}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

<script module lang="ts">
  import type { SelectRootProps } from '@destyler-ui/svelte'

  type Framework = { label: string, value: string, disabled?: boolean }
  export interface BasicProps extends Omit<SelectRootProps<Framework>, 'collection'> {}
</script>

<script lang="ts">
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  const collection = createListCollection<Framework>({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
</script>

<Select.Root {collection} {...props}>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>ChevronDownIcon</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <Select.Positioner data-testid="positioner">
    <Select.Content>
      <Select.ItemGroup>
        <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Select.Item {item}>
            <Select.ItemText>{item.label}</Select.ItemText>
            <Select.ItemIndicator>✓</Select.ItemIndicator>
          </Select.Item>
        {/each}
      </Select.ItemGroup>
      <Select.List />
    </Select.Content>
  </Select.Positioner>
  <Select.HiddenSelect />
</Select.Root>

Advanced

Advanced select usage with custom item rendering.

Show Code

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
</script>

<template>
  <Select.Root :collection="collection">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          🔽
        </Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item.value" :item="item">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function Advanced() {
  return (
    <Select.Root collection={collection}>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>🔽</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {collection.items.map(item => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid/select'
import { Index, Portal } from 'solid-js/web'

export function Advanced() {
  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
  return (
    <Select.Root collection={collection}>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              <Index each={collection.items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item().label}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
</script>

<Select.Root {collection}>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>🔽</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <div use:portal>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
          {#each collection.items as item (item.value)}
            <Select.Item {item}>
              <Select.ItemText>{item.label}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
  </div>
  <Select.HiddenSelect />
</Select.Root>

Controlled

Control the selected value programmatically.

Show Code

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'
import { ref } from 'vue'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
const value = ref(['vue'])
</script>

<template>
  <Select.Root :collection="collection" v-model="value">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          🔽
        </Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item.value" :item="item">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

import { useState } from 'react'
import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function Controlled() {
  const [value, setValue] = useState<string[]>(['vue'])

  return (
    <Select.Root
      collection={collection}
      value={value}
      onValueChange={setValue}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>🔽</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {collection.items.map(item => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid/select'
import { createSignal } from 'solid-js'
import { Index, Portal } from 'solid-js/web'

interface Item {
  label: string
  value: string
  disabled?: boolean
}

export function Controlled() {
  const [, setSelectedItems] = createSignal<Item[]>([])

  const collection = createListCollection<Item>({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })

  return (
    <Select.Root collection={collection} onValueChange={e => setSelectedItems(e.items)}>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              <Index each={collection.items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item().label}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
  let value = $state(['vue'])
</script>

<Select.Root {collection} bind:value>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>🔽</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <div use:portal>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
          {#each collection.items as item (item.value)}
            <Select.Item {item}>
              <Select.ItemText>{item.label}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
  </div>
  <Select.HiddenSelect />
</Select.Root>

Multiple

Enable multiple item selection.

Show Code

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
</script>

<template>
  <Select.Root :collection="collection" multiple>
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          🔽
        </Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item.value" :item="item">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function Multiple() {
  return (
    <Select.Root collection={collection} multiple>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>🔽</Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {collection.items.map(item => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid/select'
import { Index, Portal } from 'solid-js/web'

export function Multiple() {
  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
  return (
    <Select.Root collection={collection} multiple>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Index each={collection.items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item().label}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
</script>

<Select.Root {collection} multiple>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>🔽</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <div use:portal>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
          {#each collection.items as item (item.value)}
            <Select.Item {item}>
              <Select.ItemText>{item.label}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
  </div>
  <Select.HiddenSelect />
</Select.Root>

Reactive Collection

Use a reactive collection for dynamic options.

Show Code

<script setup lang="ts">
import { Select } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'
import { computed, ref } from 'vue'

const itemsBase = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Svelte', value: 'svelte', disabled: true },
    { label: 'Vue', value: 'vue' },
  ],
})

const number = ref(0)

const inc = () => number.value++
const dec = () => number.value--

const collection = computed(() => {
  const newItems = itemsBase.items.map((item) => ({
    ...item,
    label: `${item.label}-${number.value}`,
  }))
  return createListCollection({ items: newItems })
})
</script>

<template>
  <div>
    <button type="button" @click="inc">Inc</button>
    <button type="button" @click="dec">Dec</button>
    <Select.Root :positioning="{ sameWidth: true }" :collection="collection">
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
        </Select.Trigger>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :item="item" :key="item.label">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>✅</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Select.Root>
  </div>
</template>

import { useMemo, useState } from 'react'
import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const itemsBase = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Svelte', value: 'svelte', disabled: true },
  { label: 'Vue', value: 'vue' },
]

export function ReactiveCollection() {
  const [number, setNumber] = useState(0)

  const inc = () => setNumber(prev => prev + 1)
  const dec = () => setNumber(prev => prev - 1)

  const collection = useMemo(() => {
    const newItems = itemsBase.map(item => ({
      ...item,
      label: `${item.label}-${number}`,
    }))
    return createListCollection({ items: newItems })
  }, [number])

  return (
    <div>
      <button type="button" onClick={inc}>Inc</button>
      <button type="button" onClick={dec}>Dec</button>
      <Select.Root positioning={{ sameWidth: true }} collection={collection}>
        <Select.Label>Framework</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
          </Select.Trigger>
        </Select.Control>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
              {collection.items.map(item => (
                <Select.Item key={item.value} item={item}>
                  <Select.ItemText>{item.label}</Select.ItemText>
                  <Select.ItemIndicator>✅</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Select.Root>
    </div>
  )
}

import { createListCollection, Select } from '@destyler-ui/solid/select'
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-solid'
import { createMemo, createSignal } from 'solid-js'
import { Index } from 'solid-js/web'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Svelte', value: 'svelte', disabled: true },
  { label: 'Vue', value: 'vue' },
]

export function ReactiveCollection() {
  const [number, setNumber] = createSignal(0)

  const collection = createMemo(() =>
    createListCollection({
      items: items.map(item => ({ ...item, label: `${item.label}-${number()}` })),
    }),
  )

  return (
    <div>
      <button type="button" onClick={() => setNumber(number() + 1)}>
        Inc
      </button>
      <button type="button" onClick={() => setNumber(number() - 1)}>
        Dec
      </button>

      <Select.Root positioning={{ sameWidth: true }} collection={collection()}>
        <Select.Label>Framework</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
            <ChevronsUpDownIcon />
          </Select.Trigger>
        </Select.Control>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
              <Index each={collection().items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item().label}</Select.ItemText>
                    <Select.ItemIndicator>
                      <CheckIcon />
                    </Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Select.Root>
    </div>
  )
}

<script lang="ts">
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Svelte', value: 'svelte', disabled: true },
    { label: 'Vue', value: 'vue' },
  ]
  let number = $state(0)
  const collection = $derived(createListCollection({
    items: items.map((item) => ({ ...item, label: `${item.label}-${number}` })),
  }))
</script>

<div>
  <button type="button" onclick={() => number += 1}>Inc</button>
  <button type="button" onclick={() => number -= 1}>Dec</button>
  <Select.Root positioning={{ sameWidth: true }} {collection}>
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
      </Select.Trigger>
    </Select.Control>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
          {#each collection.items as item (item.value)}
            <Select.Item {item}>
              <Select.ItemText>{item.label}</Select.ItemText>
              <Select.ItemIndicator>✅</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
  </Select.Root>
</div>

With Field

Combine with a form field for validation and labeling.

Show Code

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { Select } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'

const collection = createListCollection({
  items: ['React', 'Solid', 'Vue'],
})
</script>

<template>
  <Field.Root>
    <Select.Root :collection="collection">
      <Select.Label>Label</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            🔽
          </Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Teleport to="body">
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              <Select.Item v-for="item in collection.items" :key="item" :item="item">
                <Select.ItemText>{{ item }}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Teleport>
      <Select.HiddenSelect />
    </Select.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { createListCollection } from '@destyler-ui/react'
import { Select } from '@destyler-ui/react'

const collection = createListCollection({
  items: ['React', 'Solid', 'Vue'],
})

interface WithFieldProps {
  disabled?: boolean
  readOnly?: boolean
  invalid?: boolean
}

export function WithField(props: WithFieldProps) {
  return (
    <Field.Root disabled={props.disabled} readOnly={props.readOnly} invalid={props.invalid}>
      <Select.Root collection={collection} disabled={props.disabled} readOnly={props.readOnly}>
        <Select.Label>Label</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
            <Select.Indicator>🔽</Select.Indicator>
          </Select.Trigger>
          <Select.ClearTrigger>Clear</Select.ClearTrigger>
        </Select.Control>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {collection.items.map(item => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
        <Select.HiddenSelect />
      </Select.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { createListCollection, Select } from '@destyler-ui/solid/select'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js/web'

export function WithField(props: Field.RootProps) {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  return (
    <Field.Root {...props}>
      <Select.Root collection={collection}>
        <Select.Label>Label</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
            <Select.Indicator>
              <ChevronDownIcon />
            </Select.Indicator>
          </Select.Trigger>
        </Select.Control>
        <Select.Positioner>
          ̦
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              <Index each={collection.items}>
                {item => (
                  <Select.Item item={item()}>
                    <Select.ItemText>{item()}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                )}
              </Index>
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
        <Select.HiddenSelect />
      </Select.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  export interface WithFieldProps {
    disabled?: boolean
    readOnly?: boolean
    invalid?: boolean
  }
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { Select, createListCollection } from '@destyler-ui/svelte'

  const { disabled, readOnly, invalid }: WithFieldProps = $props()
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })
</script>

<Field.Root {disabled} {readOnly} {invalid}>
  <Select.Root {collection} {disabled} {readOnly}>
    <Select.Label>Label</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>🔽</Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <div use:portal>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {#each collection.items as item (item)}
              <Select.Item {item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            {/each}
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </div>
    <Select.HiddenSelect />
  </Select.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

Show Code

<script setup lang="ts">
import { Select, useSelect } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'

const collection = createListCollection({
  items: ['React', 'Solid', 'Vue'],
})

const select = useSelect({ collection: collection })
</script>

<template>
  <button @click="select.focus()">Focus</button>

  <Select.RootProvider :value="select">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          🔽
        </Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item" :item="item">
              <Select.ItemText>{{ item }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.RootProvider>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Select, useSelect } from '@destyler-ui/react'

const collection = createListCollection({
  items: ['React', 'Solid', 'Vue'],
})

export function RootProvider() {
  const select = useSelect({ collection })

  return (
    <>
      <button onClick={() => select.focus()}>Focus</button>

      <Select.RootProvider value={select}>
        <Select.Label>Framework</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
            <Select.Indicator>🔽</Select.Indicator>
          </Select.Trigger>
          <Select.ClearTrigger>Clear</Select.ClearTrigger>
        </Select.Control>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {collection.items.map(item => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
        <Select.HiddenSelect />
      </Select.RootProvider>
    </>
  )
}

import { createListCollection, Select, useSelect } from '@destyler-ui/solid/select'
import { Index, Portal } from 'solid-js/web'

export function RootProvider() {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  const select = useSelect({ collection })

  return (
    <>
      <button onClick={() => select().focus()}>Focus</button>

      <Select.RootProvider value={select}>
        <Select.Label>Framework</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
            <Select.Indicator>▼</Select.Indicator>
          </Select.Trigger>
          <Select.ClearTrigger>Clear</Select.ClearTrigger>
        </Select.Control>
        <Portal>
          <Select.Positioner>
            <Select.Content>
              <Select.ItemGroup>
                <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
                <Index each={collection.items}>
                  {item => (
                    <Select.Item item={item()}>
                      <Select.ItemText>{item()}</Select.ItemText>
                      <Select.ItemIndicator>✓</Select.ItemIndicator>
                    </Select.Item>
                  )}
                </Index>
              </Select.ItemGroup>
            </Select.Content>
          </Select.Positioner>
        </Portal>
        <Select.HiddenSelect />
      </Select.RootProvider>
    </>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Select, createListCollection, useSelect } from '@destyler-ui/svelte'

  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })
  const id = $props.id()
  const select = useSelect({ collection, id })
</script>

<button type="button" onclick={() => select().focus()}>Focus</button>

<Select.RootProvider value={select}>
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a Framework" />
      <Select.Indicator>🔽</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>Clear</Select.ClearTrigger>
  </Select.Control>
  <div use:portal>
    <Select.Positioner>
      <Select.Content>
        <Select.ItemGroup>
          <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
          {#each collection.items as item (item)}
            <Select.Item {item}>
              <Select.ItemText>{item}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
  </div>
  <Select.HiddenSelect />
</Select.RootProvider>

API Reference

Root

Prop	Default	Type
collection*	—	ListCollection<T> The collection of items
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	true	false | true Whether the select should close after an item is selected
composite	true	false | true Whether the select is a composed with other composite widgets like tabs or combobox
defaultOpen	—	false | true The initial open state of the select when it is first rendered. Use when you do not need to control its open state.
defaultValue	—	string[] The initial value of the select when it is first rendered. Use when you do not need to control the state of the select.
deselectable	—	false | true Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection
disabled	—	false | true Whether the select is disabled
form	—	string The associate form of the underlying select.
highlightedValue	—	string The key of the highlighted item
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item: (id: string | number) => string; itemGroup: (id: string | number) => string; itemGroupLabel: (id: string | number) => string; }> The ids of the elements in the select. Useful for composition.
invalid	—	false | true Whether the select is invalid
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation through the options
modelValue	—	string[]
multiple	—	false | true Whether to allow multiple selection
name	—	string The `name` attribute of the underlying select.
open	—	false | true Whether the select menu is open
positioning	—	calendar.PositioningOptions The positioning options of the menu.
readOnly	—	false | true Whether the select is read-only
required	—	false | true Whether the select is required
scrollToIndexFn	—	(details: select.ScrollToIndexDetails) => void Function to scroll to a specific index
unmountOnExit	false	false | true Whether to unmount on exit.

Emit	Event
focusOutside	[event: FocusOutsideEvent] Function called when the focus is moved outside the component
highlightChange	[details: HighlightChangeDetails<T>] The callback fired when the highlighted item changes.
interactOutside	[event: InteractOutsideEvent] Function called when an interaction happens outside the component
openChange	[details: OpenChangeDetails] Function called when the popup is opened
pointerDownOutside	[event: PointerDownOutsideEvent] Function called when the pointer is pressed down outside the component
update:modelValue	[value: string[]] The callback fired when the model value changes.
update:open	[open: boolean] The callback fired when the open state changes.
valueChange	[details: ValueChangeDetails<T>] The callback fired when the selected item changes.

ClearTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

HiddenSelect

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
item*	—	any The item to render
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
persistFocus	—	false | true Whether hovering outside should clear the highlighted state

ItemContext

No serializable props or emits are declared for this part.

ItemGroup

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
id	—	string

ItemGroupLabel

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	MachineApi<PropTypes, T>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
placeholder	—	string

Root

Prop	Default	Type
collection*	—	ListCollection<T> The collection of items
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	true	false | true Whether the select should close after an item is selected
composite	true	false | true Whether the select is a composed with other composite widgets like tabs or combobox
defaultOpen	—	false | true The initial open state of the select when it is first rendered. Use when you do not need to control its open state.
defaultValue	—	string[] The initial value of the select when it is first rendered. Use when you do not need to control the state of the select.
deselectable	—	false | true Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection
disabled	—	false | true Whether the select is disabled
form	—	string The associate form of the underlying select.
highlightedValue	—	null | string The key of the highlighted item
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item: (id: string | number) => string; itemGroup: (id: string | number) => string; itemGroupLabel: (id: string | number) => string; }> The ids of the elements in the select. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
invalid	—	false | true Whether the select is invalid
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation through the options
multiple	—	false | true Whether to allow multiple selection
name	—	string The `name` attribute of the underlying select.
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	(event: calendar.FocusOutsideEvent) => void Function called when the focus is moved outside the component
onHighlightChange	—	(details: select.HighlightChangeDetails<T>) => void The callback fired when the highlighted item changes.
onInteractOutside	—	(event: calendar.InteractOutsideEvent) => void Function called when an interaction happens outside the component
onOpenChange	—	(details: select.OpenChangeDetails) => void Function called when the popup is opened
onPointerDownOutside	—	(event: calendar.PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component
onValueChange	—	(details: select.ValueChangeDetails<T>) => void The callback fired when the selected item changes.
open	—	false | true Whether the select menu is open
positioning	—	calendar.PositioningOptions The positioning options of the menu.
present	—	false | true Whether the node is present (controlled by the user)
readOnly	—	false | true Whether the select is read-only
required	—	false | true Whether the select is required
scrollToIndexFn	—	(details: select.ScrollToIndexDetails) => void Function to scroll to a specific index
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The keys of the selected items

ClearTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UseSelectContext<T>) => ReactNode

Control

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

HiddenSelect

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
item*	—	any The item to render
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
persistFocus	—	false | true Whether hovering outside should clear the highlighted state

ItemContext

Prop	Default	Type
children*	—	(context: UseSelectItemContext) => ReactNode

ItemGroup

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroupLabel

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemPropsProvider

No serializable props or emits are declared for this part.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UseSelectReturn<T>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
placeholder	—	string Text to display when no value is selected.

Root

Prop	Default	Type
collection*	—	ListCollection<T> The collection of items
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	true	false | true Whether the select should close after an item is selected
composite	true	false | true Whether the select is a composed with other composite widgets like tabs or combobox
defaultOpen	—	false | true The initial open state of the select when it is first rendered. Use when you do not need to control its open state.
defaultValue	—	string[] The initial value of the select when it is first rendered. Use when you do not need to control the state of the select.
deselectable	—	false | true Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection
disabled	—	false | true Whether the select is disabled
form	—	string The associate form of the underlying select.
highlightedValue	—	null | string The key of the highlighted item
ids	—	Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item: (id: string | number) => string; itemGroup: (id: string | number) => string; itemGroupLabel: (id: string | number) => string; }> The ids of the elements in the select. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
invalid	—	false | true Whether the select is invalid
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation through the options
multiple	—	false | true Whether to allow multiple selection
name	—	string The `name` attribute of the underlying select.
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	(event: select.FocusOutsideEvent) => void Function called when the focus is moved outside the component
onHighlightChange	—	(details: select.HighlightChangeDetails<T>) => void The callback fired when the highlighted item changes.
onInteractOutside	—	(event: select.InteractOutsideEvent) => void Function called when an interaction happens outside the component
onOpenChange	—	(details: OpenChangeDetails) => void Function called when the popup is opened
onPointerDownOutside	—	(event: select.PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component
onValueChange	—	(details: select.ValueChangeDetails<T>) => void The callback fired when the selected item changes.
open	—	false | true Whether the select menu is open
positioning	—	select.PositioningOptions The positioning options of the menu.
present	—	false | true Whether the node is present (controlled by the user)
readOnly	—	false | true Whether the select is read-only
required	—	false | true Whether the select is required
scrollToIndexFn	—	(details: select.ScrollToIndexDetails) => void Function to scroll to a specific index
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The keys of the selected items

ClearTrigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UseSelectContext<T>) => Element

Control

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

HiddenSelect

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.SelectHTMLAttributes<HTMLSelectElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
item*	—	any The item to render
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
persistFocus	—	false | true Whether hovering outside should clear the highlighted state

ItemContext

Prop	Default	Type
children*	—	(context: UseSelectItemContext) => Element

ItemGroup

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroupLabel

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemPropsProvider

No serializable props or emits are declared for this part.

ItemText

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UseSelectReturn<T>
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Trigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js164.JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
placeholder	—	string Text to display when no value is selected.

Root

Prop	Default	Type
collection*	—	MaybeFunction<ListCollection<T>> The collection of items
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
closeOnSelect	true	false | true Whether the select should close after an item is selected
composite	true	false | true Whether the select is a composed with other composite widgets like tabs or combobox
defaultOpen	—	false | true
defaultValue	—	string[]
deselectable	—	false | true Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection
disabled	—	false | true Whether the select is disabled
form	—	string The associate form of the underlying select.
highlightedValue	—	null | string The key of the highlighted item
id	—	string
ids	—	Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item: (id: string | number) => string; itemGroup: (id: string | number) => string; itemGroupLabel: (id: string | number) => string; }> The ids of the elements in the select. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
invalid	—	false | true Whether the select is invalid
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation through the options
multiple	—	false | true Whether to allow multiple selection
name	—	string The `name` attribute of the underlying select.
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	((event: FocusOutsideEvent) => void) | undefined Function called when the focus is moved outside the component
onHighlightChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SelectHighlightChangeDetails<T>) => void The callback fired when the highlighted item changes.
onInteractOutside	—	((event: InteractOutsideEvent) => void) | undefined Function called when an interaction happens outside the component
onOpenChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SelectOpenChangeDetails) => void Function called when the popup is opened
onPointerDownOutside	—	((event: PointerDownOutsideEvent) => void) | undefined Function called when the pointer is pressed down outside the component
onValueChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SelectValueChangeDetails<T>) => void The callback fired when the selected item changes.
open	—	false | true Whether the select menu is open
positioning	—	PositioningOptions | undefined The positioning options of the menu.
present	—	false | true Whether the node is present (controlled by the user)
readOnly	—	false | true Whether the select is read-only
required	—	false | true Whether the select is required
scrollToIndexFn	—	((details: ScrollToIndexDetails) => void) | undefined Function to scroll to a specific index
skipAnimationOnMount	false	false | true Whether to allow the initial presence animation.
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The keys of the selected items

ClearTrigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

Content

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

Prop	Default	Type
render*	—	Snippet<[UseSelectReturn<T>]>

Control

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

HiddenSelect

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"select">]>
children	—	Snippet<[]> | undefined

Indicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Item

Prop	Default	Type
item*	—	T
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
disabled	—	false | true

ItemContext

Prop	Default	Type
render*	—	Snippet<[UseSelectItemContext]>

ItemGroup

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
id	—	string

ItemGroupLabel

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemIndicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemPropsProvider

No serializable props or emits are declared for this part.

ItemText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>
children	—	Snippet<[]> | undefined

Label

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children	—	Snippet<[]> | undefined

List

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Positioner

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

RootProvider

Prop	Default	Type
value*	—	UseSelectReturn<T>
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
skipAnimationOnMount	false	false | true Whether to allow the initial presence animation.
unmountOnExit	false	false | true Whether to unmount on exit.

Trigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

ValueText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>
children	—	Snippet<[]> | undefined
placeholder	—	string