Combobox

Filterable combobox with controlled value and open state

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxDemoExample() {
  return (
    <Combobox><ComboboxInput placeholder="Select a framework" /><ComboboxContent><ComboboxEmpty>No items found.</ComboboxEmpty><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Installation

npx @fictjs/shadcn@latest add combobox

Copy the Fict shadcn component into your project.

Source

components/ui/combobox.tsx

src/components/ui/combobox.tsx

import { createContext, useContext } from 'fict'
import { createSignal } from 'fict/advanced'

import { cn } from '@/lib/cn'

type GenericProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}

type MaybeAccessor<T> = T | (() => T)

type ComboboxProps = GenericProps & {
  value?: MaybeAccessor<string | string[]>
  defaultValue?: string | string[]
  onValueChange?: (value: string | string[]) => void
  open?: MaybeAccessor<boolean>
  defaultOpen?: boolean
  onOpenChange?: (open: boolean) => void
  multiple?: boolean
  autoHighlight?: boolean
}

type ComboboxItemProps = GenericProps & {
  value: string
}

type ComboboxContextValue = {
  values: () => string[]
  selectValue: (value: string) => void
  removeValue: (value: string) => void
  clear: () => void
  open: () => boolean
  setOpen: (open: boolean) => void
  query: () => string
  setQuery: (query: string) => void
  multiple: boolean
  autoHighlight: boolean
}

const ComboboxContext = createContext<ComboboxContextValue | null>(null)

function read<T>(value: MaybeAccessor<T> | undefined, fallback: T): T {
  if (typeof value === 'function') return (value as () => T)()
  return value ?? fallback
}

function useCombobox(): ComboboxContextValue {
  const context = useContext(ComboboxContext)
  if (!context) throw new Error('Combobox components must be used inside Combobox')
  return context
}

export function Combobox(props: ComboboxProps) {
  const initialValues = Array.isArray(props.defaultValue) ? props.defaultValue : props.defaultValue ? [props.defaultValue] : []
  const internalValues = createSignal<string[]>(initialValues)
  const internalOpen = createSignal(props.defaultOpen ?? false)
  const query = createSignal('')

  const values = () => {
    const controlled = read(props.value, props.multiple ? [] : '')
    if (props.value === undefined) return internalValues()
    return Array.isArray(controlled) ? controlled : controlled ? [controlled] : []
  }
  const commitValues = (next: string[]) => {
    if (props.value === undefined) internalValues(next)
    props.onValueChange?.(props.multiple ? next : next[0] ?? '')
  }
  const setOpen = (open: boolean) => {
    if (props.open === undefined) internalOpen(open)
    props.onOpenChange?.(open)
  }
  const contextValue: ComboboxContextValue = {
    values,
    selectValue: value => {
      const current = values()
      if (props.multiple) commitValues(current.includes(value) ? current.filter(item => item !== value) : [...current, value])
      else commitValues([value])
    },
    removeValue: value => commitValues(values().filter(item => item !== value)),
    clear: () => commitValues([]),
    open: () => read(props.open, internalOpen()),
    setOpen,
    query,
    setQuery: value => {
      query(value)
    },
    multiple: props.multiple ?? false,
    autoHighlight: props.autoHighlight ?? false,
  }

  const {
    class: className,
    children,
    value,
    defaultValue,
    onValueChange,
    open,
    defaultOpen,
    onOpenChange,
    multiple,
    autoHighlight,
    ...rest
  } = props

  return (
    <ComboboxContext.Provider value={contextValue}>
      <div data-slot='combobox' class={cn('relative', className)} {...rest}>
        {children}
      </div>
    </ComboboxContext.Provider>
  )
}

export function ComboboxInput(props: GenericProps) {
  const context = useCombobox()
  const { class: className, onFocus, onInput, onKeyDown, children, showClear, ...rest } = props
  const input = <input
    type='text'
    role='combobox'
    aria-autocomplete='list'
    aria-expanded={() => context.open()}
    value={() => context.query() || (context.multiple ? '' : context.values()[0] ?? '')}
    data-slot='combobox-input-control'
    class='min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50'
    onFocus={(event: FocusEvent) => {
      ;(onFocus as ((event: FocusEvent) => void) | undefined)?.(event)
      if (!event.defaultPrevented) context.setOpen(true)
    }}
    onInput={(event: Event) => {
      ;(onInput as ((event: Event) => void) | undefined)?.(event)
      if (event.defaultPrevented) return
      const target = event.currentTarget as HTMLInputElement
      context.setQuery(target.value)
      context.setOpen(true)
    }}
    onKeyDown={(event: KeyboardEvent) => {
      ;(onKeyDown as ((event: KeyboardEvent) => void) | undefined)?.(event)
      if (event.key === 'Escape') context.setOpen(false)
    }}
    {...rest}
  />
  return (
    <div
      data-slot='combobox-input'
      class={cn(
        'flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring has-[[aria-invalid=true]]:border-destructive',
        className,
      )}
    >
      {children}
      {input}
      {showClear && context.values().length ? <button type='button' aria-label='Clear selection' onClick={() => { context.clear(); context.setQuery('') }}>×</button> : null}
      <button type='button' aria-label='Toggle options' tabIndex={-1} onClick={() => context.setOpen(!context.open())}>⌄</button>
    </div>
  )
}

export function ComboboxList(props: GenericProps) {
  const context = useCombobox()
  const { class: className, children, forceMount, ...rest } = props
  return () =>
    context.open() || forceMount ? (
      <div
        role='listbox'
        data-slot='combobox-list'
        class={cn('mt-1 max-h-64 overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md', className)}
        {...rest}
      >
        {children}
      </div>
    ) : null
}

export function ComboboxContent(props: GenericProps) {
  const context = useCombobox()
  const { class: className, children, forceMount, ...rest } = props
  return () => context.open() || forceMount ? <div data-slot='combobox-content' class={cn('absolute z-50 mt-1 w-full rounded-md border bg-popover p-1 text-popover-foreground shadow-md', className)} {...rest}>{children}</div> : null
}

export function ComboboxEmpty(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div data-slot='combobox-empty' class={cn('px-2 py-6 text-center text-sm text-muted-foreground', className)} {...rest} />
}

export function ComboboxGroup(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div role='group' data-slot='combobox-group' class={cn('py-1', className)} {...rest} />
}

export function ComboboxLabel(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div data-slot='combobox-label' class={cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', className)} {...rest} />
}

export function ComboboxSeparator(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div role='separator' data-slot='combobox-separator' class={cn('-mx-1 my-1 h-px bg-border', className)} {...rest} />
}

export function ComboboxChips(props: GenericProps) {
  const context = useCombobox()
  const { class: className, onClick, ...rest } = props
  return <div data-slot='combobox-chips' class={cn('flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-2 py-1', className)} onClick={(event: MouseEvent) => { ;(onClick as ((event: MouseEvent) => void) | undefined)?.(event); if (!event.defaultPrevented) context.setOpen(true) }} {...rest} />
}

export function ComboboxChip(props: ComboboxItemProps) {
  const context = useCombobox()
  const { class: className, children, value, ...rest } = props
  return (
    <span data-slot='combobox-chip' class={cn('inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-sm', className)} {...rest}>
      {children}
      <button type='button' aria-label={`Remove ${value}`} onClick={() => context.removeValue(value)}>×</button>
    </span>
  )
}

export function ComboboxChipsInput(props: GenericProps) {
  const context = useCombobox()
  const { class: className, onInput, ...rest } = props
  return <input role='combobox' aria-expanded={() => context.open()} value={() => context.query()} class={cn('min-w-20 flex-1 bg-transparent py-1 text-sm outline-none', className)} onFocus={() => context.setOpen(true)} onInput={(event: Event) => { ;(onInput as ((event: Event) => void) | undefined)?.(event); context.setQuery((event.currentTarget as HTMLInputElement).value); context.setOpen(true) }} {...rest} />
}

export function ComboboxValue(props: GenericProps) {
  const context = useCombobox()
  const { children, ...rest } = props
  return () => <span data-slot='combobox-value' {...rest}>{typeof children === 'function' ? children(context.values()) : children ?? context.values().join(', ')}</span>
}

export function ComboboxTrigger(props: GenericProps) {
  const context = useCombobox()
  const { class: className, children, onClick, ...rest } = props
  return <button type='button' role='combobox' aria-expanded={() => context.open()} data-slot='combobox-trigger' class={cn('flex h-9 w-full items-center justify-between rounded-md border px-3 text-sm', className)} onClick={(event: MouseEvent) => { ;(onClick as ((event: MouseEvent) => void) | undefined)?.(event); if (!event.defaultPrevented) context.setOpen(!context.open()) }} {...rest}>{children}<span aria-hidden='true'>⌄</span></button>
}

export function ComboboxItem(props: ComboboxItemProps) {
  const context = useCombobox()
  const { class: className, children, value, onClick, ...rest } = props
  const matches = () => {
    const query = context.query().trim().toLowerCase()
    const label = typeof children === 'string' ? children : value
    return !query || label.toLowerCase().includes(query)
  }

  return () =>
    matches() ? (
      <button
        type='button'
        role='option'
        aria-selected={() => context.values().includes(value)}
        data-slot='combobox-item'
        data-state={() => (context.values().includes(value) ? 'selected' : 'idle')}
        data-highlighted={() => context.autoHighlight && !context.query() ? 'true' : undefined}
        class={cn('relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground', className)}
        onClick={(event: MouseEvent) => {
          ;(onClick as ((event: MouseEvent) => void) | undefined)?.(event)
          if (event.defaultPrevented) return
          context.selectValue(value)
          context.setQuery(context.multiple ? '' : value)
          if (!context.multiple) context.setOpen(false)
        }}
        {...rest}
      >
        {children}
      </button>
    ) : null
}

Usage

Examples

Basic

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxBasicExample() {
  return (
    <Combobox><ComboboxInput placeholder="Select a framework" /><ComboboxContent><ComboboxEmpty>No items found.</ComboboxEmpty><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Multiple

Next.js

import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue } from '@/components/ui/combobox'

...

import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxMultipleExample() {
  return (
    <Combobox multiple autoHighlight defaultValue={['Next.js']}>
      <ComboboxChips class="w-full max-w-xs"><ComboboxValue>{values => <>{values.map(value => <ComboboxChip value={value}>{value}</ComboboxChip>)}<ComboboxChipsInput /></>}</ComboboxValue></ComboboxChips>
      <ComboboxContent><ComboboxEmpty>No items found.</ComboboxEmpty><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent>
    </Combobox>
  )
}

Clear

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxClearExample() {
  return (
    <Combobox defaultValue="Next.js"><ComboboxInput placeholder="Select a framework" showClear /><ComboboxContent><ComboboxEmpty>No items found.</ComboboxEmpty><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Groups

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator } from '@/components/ui/combobox'

const timezones = [
  ['Americas', ['(GMT-5) New York', '(GMT-8) Los Angeles', '(GMT-6) Chicago', '(GMT-5) Toronto', '(GMT-8) Vancouver', '(GMT-3) São Paulo']],
  ['Europe', ['(GMT+0) London', '(GMT+1) Paris', '(GMT+1) Berlin', '(GMT+1) Rome', '(GMT+1) Madrid', '(GMT+1) Amsterdam']],
  ['Asia/Pacific', ['(GMT+9) Tokyo', '(GMT+8) Shanghai', '(GMT+8) Singapore', '(GMT+4) Dubai', '(GMT+11) Sydney', '(GMT+9) Seoul']],
] as const

export default function ComboboxGroupsExample() {
  return (
    <Combobox><ComboboxInput placeholder="Select a timezone" /><ComboboxContent><ComboboxEmpty>No timezones found.</ComboboxEmpty><ComboboxList>{timezones.map(([group, items], index) => <><ComboboxGroup><ComboboxLabel>{group}</ComboboxLabel>{items.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxGroup>{index < timezones.length - 1 ? <ComboboxSeparator /> : null}</>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Custom

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'
import { Item, ItemContent, ItemDescription, ItemTitle } from '@/components/ui/item'
...

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'
import { Item, ItemContent, ItemDescription, ItemTitle } from '@/components/ui/item'

const countries = [
  ['argentina', 'Argentina', 'South America (ar)'],
  ['australia', 'Australia', 'Oceania (au)'],
  ['brazil', 'Brazil', 'South America (br)'],
  ['canada', 'Canada', 'North America (ca)'],
  ['china', 'China', 'Asia (cn)'],
  ['colombia', 'Colombia', 'South America (co)'],
  ['egypt', 'Egypt', 'Africa (eg)'],
  ['france', 'France', 'Europe (fr)'],
  ['germany', 'Germany', 'Europe (de)'],
  ['italy', 'Italy', 'Europe (it)'],
  ['japan', 'Japan', 'Asia (jp)'],
  ['kenya', 'Kenya', 'Africa (ke)'],
  ['mexico', 'Mexico', 'North America (mx)'],
  ['new-zealand', 'New Zealand', 'Oceania (nz)'],
  ['nigeria', 'Nigeria', 'Africa (ng)'],
  ['south-africa', 'South Africa', 'Africa (za)'],
  ['south-korea', 'South Korea', 'Asia (kr)'],
  ['united-kingdom', 'United Kingdom', 'Europe (gb)'],
  ['united-states', 'United States', 'North America (us)'],
] as const

export default function ComboboxCustomExample() {
  return (
    <Combobox><ComboboxInput placeholder="Search countries..." /><ComboboxContent><ComboboxEmpty>No countries found.</ComboboxEmpty><ComboboxList>{countries.map(([value, label, description]) => <ComboboxItem value={value}><Item size="xs" class="p-0"><ItemContent><ItemTitle>{label}</ItemTitle><ItemDescription>{description}</ItemDescription></ItemContent></Item></ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Invalid

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxInvalidExample() {
  return (
    <Combobox><ComboboxInput placeholder="Select a framework" aria-invalid="true" /><ComboboxContent><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Disabled

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxDisabledExample() {
  return (
    <Combobox><ComboboxInput placeholder="Select a framework" disabled /><ComboboxContent><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Auto Highlight

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox'

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'] as const

export default function ComboboxAutoHighlightExample() {
  return (
    <Combobox autoHighlight><ComboboxInput placeholder="Select a framework" /><ComboboxContent><ComboboxList>{frameworks.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, ComboboxValue } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, ComboboxValue } from '@/components/ui/combobox'

const countries = [
  ['', 'Select country'], ['argentina', 'Argentina'], ['australia', 'Australia'], ['brazil', 'Brazil'], ['canada', 'Canada'],
  ['china', 'China'], ['colombia', 'Colombia'], ['egypt', 'Egypt'], ['france', 'France'], ['germany', 'Germany'], ['italy', 'Italy'],
  ['japan', 'Japan'], ['kenya', 'Kenya'], ['mexico', 'Mexico'], ['new-zealand', 'New Zealand'], ['nigeria', 'Nigeria'],
  ['south-africa', 'South Africa'], ['south-korea', 'South Korea'], ['united-kingdom', 'United Kingdom'], ['united-states', 'United States'],
] as const

export default function ComboboxPopupExample() {
  return (
    <Combobox defaultValue=""><ComboboxTrigger class="w-64"><ComboboxValue>Select country</ComboboxValue></ComboboxTrigger><ComboboxContent class="w-72"><ComboboxInput placeholder="Search" aria-label="Search countries" /><ComboboxEmpty>No items found.</ComboboxEmpty><ComboboxList>{countries.map(([value, label]) => <ComboboxItem value={value}>{label}</ComboboxItem>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Input Group

import { Combobox, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList } from '@/components/ui/combobox'

...

import { Combobox, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList } from '@/components/ui/combobox'

const timezones = [
  ['Americas', ['(GMT-5) New York', '(GMT-8) Los Angeles', '(GMT-6) Chicago', '(GMT-5) Toronto', '(GMT-8) Vancouver', '(GMT-3) São Paulo']],
  ['Europe', ['(GMT+0) London', '(GMT+1) Paris', '(GMT+1) Berlin', '(GMT+1) Rome', '(GMT+1) Madrid', '(GMT+1) Amsterdam']],
  ['Asia/Pacific', ['(GMT+9) Tokyo', '(GMT+8) Shanghai', '(GMT+8) Singapore', '(GMT+4) Dubai', '(GMT+11) Sydney', '(GMT+9) Seoul']],
] as const

function GlobeIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18" /></svg>
}

export default function ComboboxInputGroupExample() {
  return (
    <Combobox><ComboboxInput placeholder="Select a timezone"><GlobeIcon /></ComboboxInput><ComboboxContent class="w-60"><ComboboxList>{timezones.map(([group, items]) => <ComboboxGroup><ComboboxLabel>{group}</ComboboxLabel>{items.map(item => <ComboboxItem value={item}>{item}</ComboboxItem>)}</ComboboxGroup>)}</ComboboxList></ComboboxContent></Combobox>
  )
}

Rtl

الفئات

التكنولوجيا

import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue } from '@/components/ui/combobox'
import { Field, FieldLabel } from '@/components/ui/field'
...

import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue } from '@/components/ui/combobox'
import { Field, FieldLabel } from '@/components/ui/field'

const translations = {
  ar: { dir: 'rtl', label: 'الفئات', placeholder: 'أضف فئات', empty: 'لم يتم العثور على فئات.', values: ['التكنولوجيا', 'التصميم', 'الأعمال'] },
  he: { dir: 'rtl', label: 'קטגוריות', placeholder: 'הוסף קטגוריות', empty: 'לא נמצאו קטגוריות.', values: ['טכנולוגיה', 'עיצוב', 'עסקים'] },
  en: { dir: 'ltr', label: 'Categories', placeholder: 'Add categories', empty: 'No categories found.', values: ['Technology', 'Design', 'Business'] },
} as const

export default function ComboboxRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const text = () => translations[language]

  return (
    <Field dir={text().dir} class="mx-auto w-full max-w-xs">
      <select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select>
      <FieldLabel>{text().label}</FieldLabel>
      <Combobox multiple autoHighlight defaultValue={['technology']}>
        <ComboboxChips><ComboboxValue>{values => <>{values.map(value => <ComboboxChip value={value}>{text().values[['technology', 'design', 'business'].indexOf(value)]}</ComboboxChip>)}<ComboboxChipsInput placeholder={text().placeholder} /></>}</ComboboxValue></ComboboxChips>
        <ComboboxContent dir={text().dir}><ComboboxEmpty>{text().empty}</ComboboxEmpty><ComboboxList>{['technology', 'design', 'business'].map((value, index) => <ComboboxItem value={value}>{text().values[index]}</ComboboxItem>)}</ComboboxList></ComboboxContent>
      </Combobox>
    </Field>
  )
}

Collapsible Command