Select

Select renders Ark UI’s accessible listbox on desktop and — when you pass the items prop and the pointer is coarse (mobile/tablet) — swaps to a native <select> driven by the same value/onValueChange. Built on Ark UI select, sourced from Shark UI.

// apps/docs/src/components/examples/select/default/react.tsx
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectIndicator,
  SelectContent,
  SelectItem,
  SelectItemText,
  SelectItemIndicator,
} from '@cloudvoyant/helical-react';
import { Check, ChevronsUpDown } from 'lucide-react';

const items = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

export default function ReactSelectDefault() {
  return (
    <Select items={items} defaultValue={['apple']} className="max-w-xs">
      <SelectTrigger>
        <SelectValue />
        <SelectIndicator>
          <ChevronsUpDown />
        </SelectIndicator>
      </SelectTrigger>
      <SelectContent>
        {items.map((item) => (
          <SelectItem key={item.value} item={item}>
            <SelectItemText>{item.label}</SelectItemText>
            <SelectItemIndicator>
              <Check />
            </SelectItemIndicator>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

<!-- apps/docs/src/components/examples/select/default/svelte.svelte -->
<script lang="ts">
  import {
    Select,
    SelectTrigger,
    SelectValue,
    SelectIndicator,
    SelectContent,
    SelectItem,
    SelectItemText,
    SelectItemIndicator,
  } from '@cloudvoyant/helical-svelte';
  import { Check, ChevronsUpDown } from 'lucide-svelte';

  const items = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];
</script>

<Select {items} defaultValue={['apple']} class="max-w-xs">
  <SelectTrigger>
    <SelectValue />
    <SelectIndicator>
      <ChevronsUpDown />
    </SelectIndicator>
  </SelectTrigger>
  <SelectContent>
    {#each items as item (item.value)}
      <SelectItem {item}>
        <SelectItemText>{item.label}</SelectItemText>
        <SelectItemIndicator>
          <Check />
        </SelectItemIndicator>
      </SelectItem>
    {/each}
  </SelectContent>
</Select>

API Reference

Select

Props

Prop	Type	Default	Description
`items`	`{ value, label, disabled? }[]`	—	Enables the native-select fallback on coarse-pointer devices.
`collection`	`ListCollection`	—	Ark UI collection (advanced); overrides `items` on desktop.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger height (native + desktop).

Also accepts all Ark SelectRoot props (value, defaultValue, onValueChange, multiple, disabled, invalid, …).

SelectTrigger / SelectValue / SelectIndicator / SelectClearTrigger

Accept all corresponding Ark props plus className/class. Supply the chevron as SelectIndicator children.

SelectContent / SelectItem / SelectItemText / SelectItemIndicator / SelectItemGroup / SelectItemGroupLabel

Accept all corresponding Ark props plus className/class. SelectItem takes an item (the collection item object). Supply the check glyph as SelectItemIndicator children.

SelectNative

Props: items, value?, defaultValue?, onValueChange?(value: string), size?, invalid?, icon? (snippet/ReactNode), plus native <select> attributes.

Accessibility

Desktop: Ark implements the Listbox WAI-ARIA pattern (combobox role, aria-expanded, arrow-key navigation, typeahead). Mobile: a native <select>.

Theming

No theme extension — uses --input, --popover, --accent, --muted-foreground.