Introduction

Un widget qui combine une saisie de texte avec une zone de liste, permettant aux utilisateurs de filtrer et de sélectionner parmi une liste d'options.

Hydratation

Niveau 2 — détection automatique intelligente. Une « Combobox » s'affiche sous forme de HTML statique et ne fournit aucun JS client à moins qu'un signal comportemental ne soit présent. Passez interactive={true} pour forcer l'hydratation, ou interactive={false} pour forcer un rendu statique.

Il s'hydrate comme une île lorsque l'un des signaux suivants est présent (ou interactive={true} est défini) :

• open (état ouvert contrôlé)- inputValue (valeur d'entrée contrôlée)- onToggle- onInputChange- onItemSelect (rappel de sélection d'élément — les listes déroulantes de sélection uniquement s'hydratent à ce sujet) | interactive prop | Résultat | | --- | --- | | omitted, no signal | Static — no client JS | | omitted, a signal present | Hydrates as an island | | true | Hydrates as an island | | false | Static — no client JS |

Toutes les décisions d'interactivité dans la bibliothèque sont acheminées via l'assistant partagé shouldHydrate() dans app/components/ui/island-utils.ts.

Utilisation

import { Combobox } from "../components/ui";

const items = [
  { label: "React", value: "react" },
  { label: "Solid", value: "solid" },
  { label: "Svelte", value: "svelte" },
  { label: "Vue", value: "vue" },
  { label: "Hono", value: "hono" },
];

export default function MyPage() {
  return (
    <Combobox
      interactive
      items={items}
      label="Framework"
      placeholder="Select a Framework"
      allowClear
    />
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc combobox dans Page Builder (content/pages/*.json) :

{
  "type": "combobox",
  "label": "Framework",
  "placeholder": "Select a Framework",
  "items": [
    { "label": "React", "value": "react" },
    { "label": "Hono", "value": "hono" }
  ]
}

Propriétés

Propriété	Type	Description
items	ComboboxItem[]	Un tableau d'éléments à afficher dans la liste.
label	Child	L'étiquette de la liste déroulante.
placeholder	string	Le texte d’espace réservé pour l’entrée.
allowClear	boolean	S'il faut afficher un bouton d'effacement dans l'entrée.
interactive	boolean	Force l’hydratation comme une île.
open	boolean	Si la liste combobox est ouverte (contrôlée).
inputValue	string	La valeur actuelle de l'entrée (contrôlée).
onToggle	() => void	Rappel déclenché lorsque la liste est basculée.
onInputChange	(value: string) => void	Rappel déclenché lorsque la valeur d'entrée change.
onItemSelect	(value: string) => void	Rappel déclenché lorsqu'un élément est sélectionné.

ComboboxItem

Propriété	Type	Description
label	string	Le texte affiché pour l'élément.
value	string	La valeur unique de l'article.
disabled	boolean	Si l'élément est désactivé.