Inputs

Combobox

Select with built-in search, built for long option lists.

<script>
  import { Combobox } from "@codeatlasdev/ui";
  let value = $state("");
</script>

<Combobox label="Framework" options={[{ value: "svelte", label: "Svelte" }]} bind:value />

Typing in the popup filters options by label, and opening the list moves focus to the search input. Pass a label (or at least a placeholder) so the listbox has an accessible name.

Basic

Search a list of options and bind the selected value.

Framework

Code

<script lang="ts">
  import { Combobox } from '@codeatlasdev/ui';

  const frameworks = [
    { value: 'svelte', label: 'Svelte' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' },
    { value: 'solid', label: 'SolidJS' },
    { value: 'astro', label: 'Astro' },
    { value: 'nuxt', label: 'Nuxt' },
    { value: 'sveltekit', label: 'SvelteKit' },
  ];

  let selected = $state('');
</script>

<div class="col">
  <Combobox label="Framework" options={frameworks} bind:value={selected} />
  {#if selected}
    <p class="out">Selected: <code>{selected}</code></p>
  {/if}
</div>

<style>
  .col {
    width: 100%;
    max-width: 320px;
  }

  .out {
    margin: var(--ca-space-3) 0 0;
    font-size: var(--ca-font-size-body2);
    color: var(--ca-text-secondary);
  }
</style>

States

Description, custom search placeholder and empty text, disabled option, error and disabled.

Framework

Astro is disabled.

Framework

Pick a framework.

Framework

Code

<script lang="ts">
  import { Combobox } from '@codeatlasdev/ui';

  const frameworks = [
    { value: 'svelte', label: 'Svelte' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'astro', label: 'Astro', disabled: true },
  ];

  let value = $state('');
</script>

<div class="col">
  <Combobox
    label="Framework"
    options={frameworks}
    bind:value
    description="Astro is disabled."
    searchPlaceholder="Filter frameworks…"
    emptyText="No framework matches."
  />
  <Combobox label="Framework" options={frameworks} error="Pick a framework." required />
  <Combobox label="Framework" options={frameworks} disabled placeholder="Unavailable" />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 320px;
  }
</style>

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable selected value.
`options`	`ComboboxOption[]`	–	Options: { value, label, disabled? }.
`label`	`string`	–	Visible label above the trigger.
`ariaLabel`	`string`	–	Accessible name when there is no visible `label`. The trigger is named `ariaLabel` followed by its current value. Without either, it is named only by its current value.
`placeholder`	`string`	`'Select…' (localized)`	Trigger text when nothing is selected. Default comes from the active i18n catalog.
`searchPlaceholder`	`string`	`'Search…' (localized)`	Placeholder and accessible name of the search input.
`emptyText`	`string`	`'No results' (localized)`	Message shown when the filter matches nothing.
`description`	`string`	–	Hint shown below the trigger.
`error`	`string`	–	Error message. Puts the combobox in the error state.
`required`	`boolean`	`false`	Marks the field as required.
`disabled`	`boolean`	`false`	Disables the combobox.
`size`	`'sm' \| 'md'`	`'md'`	Trigger height.
`class`	`string`	–	Extra classes on the root.
`onchange`	`(value: string) => void`	–	Called when an option is selected.