Compare
Component
Compare · 11 components with a popup

Autocomplete, five ways

Open one. Five follow. Each tile runs Autocomplete in its own framework and reports the change in its own syntax.

Autocomplete docs: demo, examples and API
Frameworks
5
Parts
21
Open now
0 of 5
Events
0

Live

Sync on · one tile drives all five

React

LoadingonOpenChange

Loading React…

Vue

Loading@open-change

Loading Vue…

Svelte

LoadingonOpenChange

Loading Svelte…

Angular

Loading(openChange)

Loading Angular…

Solid

LoadingonOpenChange

Loading Solid…

EventsNo changes yet

No changes yet. Use any tile.

The same example, in each framework

The showcase example for Autocomplete, as written in each framework. Lines that only React has are marked.

React · Autocomplete.tsx23 lines only in React
import { Autocomplete } from '@▢▢▢▢/react/autocomplete'

const tags = ['feature', 'fix', 'bug', 'docs', 'internal', 'mobile', 'performance', 'release']

export default function AutocompleteExample() {
  return (
    <Autocomplete.Root items={tags}>
      <label className="field">
        <span className="select-label">Search tags</span>
        <Autocomplete.Input className="input" placeholder="e.g. feature" />
      </label>
      <Autocomplete.Portal>
        <Autocomplete.Positioner
          className="select-positioner"
          sideOffset={6}
        >
          <Autocomplete.Popup className="select-popup combobox-popup">
            <Autocomplete.Empty className="combobox-empty">
              No tags found.
            </Autocomplete.Empty>
            <Autocomplete.List className="select-list">
              <Autocomplete.Collection>
                {(tag: string) => (
                  <Autocomplete.Item
                    key={tag}
                    value={tag}
                    className="select-item plain"
                  >
                    {tag}
                  </Autocomplete.Item>
                )}
              </Autocomplete.Collection>
            </Autocomplete.List>
          </Autocomplete.Popup>
        </Autocomplete.Positioner>
      </Autocomplete.Portal>
    </Autocomplete.Root>
  )
}
Autocomplete.vue
<script setup lang="ts">
import { Autocomplete } from '@▢▢▢▢/vue/autocomplete'

const tags = ['feature', 'fix', 'bug', 'docs', 'internal', 'mobile', 'performance', 'release']
</script>

<template>
  <Autocomplete.Root :items="tags">
    <label class="field">
      <span class="select-label">Search tags</span>
      <Autocomplete.Input class="input" placeholder="e.g. feature" />
    </label>
    <Autocomplete.Portal>
      <Autocomplete.Positioner
        class="select-positioner"
        :side-offset="6"
      >
        <Autocomplete.Popup class="select-popup combobox-popup">
          <Autocomplete.Empty class="combobox-empty"
            >No tags found.</Autocomplete.Empty
          >
          <Autocomplete.List class="select-list">
            <Autocomplete.Collection v-slot="tag">
              <Autocomplete.Item
                :key="tag"
                :value="tag"
                class="select-item plain"
              >
                {{ tag }}
              </Autocomplete.Item>
            </Autocomplete.Collection>
          </Autocomplete.List>
        </Autocomplete.Popup>
      </Autocomplete.Positioner>
    </Autocomplete.Portal>
  </Autocomplete.Root>
</template>

Measured, per framework

Autocomplete in each framework, side by side. Lower is better for size, time and memory. No outside baseline: the frameworks are compared with each other only.

MetricReactVueSvelteAngularSolid
SizeKiB gzip, with core and dom
Openms, median
Closems, median
MemoryMiB after one open and close
Testspassing
Measured
Nov 4 on Apple M3 Max, Chromium 156, 35 runs per framework over 5 page loads. The range under each time is the spread of the per-load medians.
Tests
Autocomplete's tests in each framework's suites, jsdom and Chromium together, from the latest run. React runs the React tests on the port; the other four also run the shared behaviour tests.
Sources
reports/size-baseline.json (size), reports/perf.json (shared code, time, memory) and reports/tests-by-component.json (tests).
Missing
Angular size: not measured yet, so shown as —.

Same props, five spellings

The Autocomplete.Root props as each framework writes them. A name that differs from React is marked.

React
Props and callbacks have upstream's names and signatures: onCheckedChange(checked, details), onOpenChange(open, details), onValueChange(value, details).
Vue
Props keep upstream's names and can be written in kebab case in a template (:default-checked, :side-offset). Upstream's callbacks are Vue events with the same arguments: checkedChange(checked, details), openChange(open, details), valueChange(value, details).
Svelte
Callbacks are props with upstream's names and arguments: onCheckedChange(checked, details), onOpenChange(open, details), onValueChange(value, details), with details.cancel(), reason and event. Native event props use Svelte's names (onclick, onkeydown).
Angular
Inputs are signal inputs with upstream's names (checked, disabled, nativeButton); boolean inputs also work as bare attributes. Each callback with details is an output named without on: checkedChange, openChange, valueChange.
Solid
Callbacks keep upstream's names and arguments: onCheckedChange(checked, details), with details.cancel() and details.event. Native handlers are camelCase (onClick, onKeyDown), as Solid 2 requires.
Prop · 34ReactVueSvelteAngularSolid
namepropnamenamename[name]name
defaultValuepropdefaultValuedefault-valuedefaultValue[defaultValue]defaultValue
valuepropvaluevaluevalue[value]value
onValueChangeeventonValueChange@value-changeonValueChange(valueChange)onValueChange
defaultOpenpropdefaultOpendefault-opendefaultOpen[defaultOpen]defaultOpen
openpropopenopenopen[open]open
onOpenChangeeventonOpenChange@open-changeonOpenChange(openChange)onOpenChange
autoHighlightpropautoHighlightauto-highlightautoHighlight[autoHighlight]autoHighlight
keepHighlightpropkeepHighlightkeep-highlightkeepHighlight[keepHighlight]keepHighlight
highlightItemOnHoverprophighlightItemOnHoverhighlight-item-on-hoverhighlightItemOnHover[highlightItemOnHover]highlightItemOnHover
actionsRefpropactionsRefactions-refactionsRef[actionsRef]actionsRef
filterpropfilterfilterfilter[filter]filter
filteredItemspropfilteredItemsfiltered-itemsfilteredItems[filteredItems]filteredItems
formpropformformform[form]form
gridpropgridgridgrid[grid]grid
inlinepropinlineinlineinline[inline]inline
itemToStringValuepropitemToStringValueitem-to-string-valueitemToStringValue[itemToStringValue]itemToStringValue
itemspropitemsitemsitems[items]items
limitproplimitlimitlimit[limit]limit
localeproplocalelocalelocale[locale]locale
loopFocusproploopFocusloop-focusloopFocus[loopFocus]loopFocus
modalpropmodalmodalmodal[modal]modal
modepropmodemodemode[mode]mode
onItemHighlightedeventonItemHighlighted@item-highlightedonItemHighlighted(itemHighlighted)onItemHighlighted
onOpenChangeCompleteeventonOpenChangeComplete@open-change-completeonOpenChangeComplete(openChangeComplete)onOpenChangeComplete
openOnInputClickpropopenOnInputClickopen-on-input-clickopenOnInputClick[openOnInputClick]openOnInputClick
submitOnItemClickpropsubmitOnItemClicksubmit-on-item-clicksubmitOnItemClick[submitOnItemClick]submitOnItemClick
virtualizedpropvirtualizedvirtualizedvirtualized[virtualized]virtualized
disabledpropdisableddisableddisabled[disabled]disabled
readOnlypropreadOnlyread-onlyreadOnly[readOnly]readOnly
requiredproprequiredrequiredrequired[required]required
inputRefpropinputRefinput-refinputRef[inputRef]inputRef
idpropididid[id]id
childrenpropchildren#defaultchildrenng-contentchildren