COMPONENT
IntentControlCombobox
Combobox intent-first (typeahead/autocomplete) avec menu dropdown accessible, clavier complet, standalone ou dans IntentControlField.
🕹️ ControlSince v0.2.5
DESIGN SYSTEM
mode
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Layout
wrapInField=true démontre l’intégration avec IntentControlField. En wrapper, le combobox devrait être insideField=true.
Size
State (local)
Placeholder
Controlled modes
Si un mode est décoché, le composant passe en default* (uncontrolled) pour ce morceau d’état.
InputValue (demo control)
Ce champ pilote inputValue (quand control inputValue = true).
SelectedId (demo control)
Sélection actuelle: null
Open (demo control)
Filtering
minChars
maxResults
Astuce: en asyncMode, loading dépend du texte tapé.
Selection UX
Free solo
createOptionLabel prefix
Field wrapper
field.label
field.hint
field.error
field.direction
Astuce: teste ↑/↓/Home/End/Enter/Escape + blur + click-outside + freeSolo.
PREVIEW
Tape pour filtrer, ↑/↓ pour naviguer, Entrée pour valider.
open=false, inputValue="", selectedId=null, loading=false
Modes: open= uncontrolled · input= controlled · selected= controlled
RESOLVED
{
"mode": "dark",
"intent": "informed",
"variant": "elevated",
"intensity": "medium",
"toneStep": 500,
"toneEffective": "blue",
"glowKey": null,
"glowBackground": null,
"style": {
"--intent-bg": "var(--ids-color-blue-500)",
"--intent-ring": "var(--ids-color-blue-700)",
"--intent-text": "var(--ids-color-blue-200)",
"--intent-bg-opacity": "0.16",
"--intent-ring-opacity": "0.304",
"--intent-border": "var(--ids-color-blue-700)",
"--intent-glow-fill-opacity": "0",
"--intent-glow-border-opacity": "0",
"--intent-glow-filter": "none"
},
"classes": {
"base": "intent-surface inline-flex items-center gap-2",
"surface": "intent-bg",
"border": "intent-ring",
"text": "intent-text",
"ring": "",
"shadow": "intent-shadow-soft",
"glow": "",
"disabled": ""
},
"warnings": []
}PROPS
| Prop | Type | Default |
|---|---|---|
| PROPS SYSTÈME | ||
intent Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed). | Intent | DEFAULT_INTENT |
variant Variant visuel (flat/outlined/elevated/ghost). | Variant | DEFAULT_VARIANT |
tone Override de tone (n’a d’effet que si intent='toned'). | Tone | DEFAULT_TONE (si toned) |
toneStep Step Tailwind (50..950) pour éclaircir/assombrir les teintes (autour du step canonique 500). | ToneStep | DEFAULT_TONE_STEP |
glow Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed'). | boolean | Glow | false (ou glow par intent) |
intensity Intensité (soft/medium/strong). | Intensity | DEFAULT_INTENSITY |
mode Mode colorimétrique (dark/light). | Mode | DEFAULT_MODE |
disabled Désactive l’état visuel (hooks + styles). | boolean | false |
| PROPS LOCALES | ||
itemsrequis Liste d’options. | T[] | — |
getIdrequis Id stable pour chaque option. | (item: T) => string | number | — |
getTextrequis Texte principal (input + filtre). | (item: T) => string | — |
getSubtitle Sous-texte (menu). | (item: T) => React.ReactNode | — |
renderItem Renderer custom d’une option. | (args) => React.ReactNode | — |
filterFn Fonction de filtrage custom. | (args) => T[] | — |
allowCustomValue Autorise une valeur libre (freeSolo). | boolean | false |
open / onOpenChange Contrôle l’ouverture du menu. | boolean / (open:boolean)=>void | — |
inputValue / onInputValueChange Contrôle le texte de l’input. | string / (value:string)=>void | — |
selectedId / onSelectionChange Contrôle la sélection. | string | null / (id,item)=>void | — |
insideField Mode naked pour être wrappé par IntentControlField. | boolean | false |
size Taille du contrôle. | "xs" | "sm" | "md" | "lg" | "xl" | md |
invalid Force l’état invalide. | boolean | false |
readOnly Lecture seule (focusable). | boolean | false |
loading Affiche l’état loading. | boolean | false |
portal Rend le menu dans un portal (document.body) avec positionnement fixed. | boolean | false |
offset Décalage vertical entre le contrôle et le menu des résultats. | number | 8 |
(native input props) Props natives (placeholder, name, etc.). | InputHTMLAttributes (filtered) | — |
TYPES & CONSTANTES
| API | Valeur / Référence |
|---|---|
| TYPES | |
IntentNametype Type union des intents sémantiques. | "informed" | "empowered" | "warned" | "threatened" | "themed" | "toned" | "glowed" |
VariantNametype Type union des variants visuels. | "flat" | "outlined" | "elevated" | "ghost" |
ToneNametype Type union des tones (familles Tailwind + theme + black). | ("slate" | "gray" | ... | "theme" | "black") |
GlowNametype Type union des aesthetic glows (utilisable quand intent='glowed'). | "aurora" | "ember" | "cosmic" | "mythic" | "royal" | "mono" |
Intensitytype Intensité des effets (glow/contraste). | "soft" | "medium" | "strong" |
ModeNametype Mode colorimétrique. | "dark" | "light" |
| CONSTANTES | |
DEFAULT_INTENTconst Intent par défaut si aucun intent n’est fourni. | informed |
DEFAULT_VARIANTconst Variant par défaut si aucun variant n’est fourni. | elevated |
DEFAULT_GLOW_BY_INTENTconst Mapping intent → glow par défaut (quand glow est implicite). | DEFAULT_GLOW_BY_INTENT |