Combobox

Un champ avec suggestions filtrées pendant la frappe.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

combobox.tsx

'use client';import {  Combobox,  ComboboxContent,  ComboboxEmpty,  ComboboxInput,  ComboboxItem,  ComboboxList,} from '@/components/ui/combobox';const FRUITS = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple'];export default function Demo() {  return (    <Combobox items={FRUITS}>      <ComboboxInput className="w-56" placeholder="Select a fruit" />      <ComboboxContent>        <ComboboxEmpty>No fruit found.</ComboboxEmpty>        <ComboboxList>          {(item: string) => (            <ComboboxItem key={item} value={item}>              {item}            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

Animation

La liste s'ouvre en fondu seul (120 ms), sans mouvement : elle apparaît à chaque frappe. Aucun item n'est animé.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add combobox

Ou depuis le paquet npm :

import { Combobox } from '@whoa-studio/ui/combobox';

Exports : Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty.