BjCombobox

Champ d’autocomplétion React avec filtrage à la saisie et navigation clavier.

Utilisation

import { useState } from 'react'
import { BjCombobox } from '@flrxnt/dsbj/react'

const cities = [
  { value: 'cotonou', label: 'Cotonou' },
  { value: 'porto', label: 'Porto-Novo' },
  { value: 'parakou', label: 'Parakou' },
  { value: 'abomey', label: 'Abomey-Calavi' },
  { value: 'djougou', label: 'Djougou' },
]

export default function App() {
  const [city, setCity] = useState('')
  return (
    <BjCombobox
      value={city}
      onValueChange={setCity}
      label="Ville"
      hint="Commune de résidence"
      placeholder="Rechercher une ville…"
      options={cities}
    />
  )
}

Aperçu

VilleCommune de résidence

Valeur et onValueChange

value est la valeur sélectionnée ; le libellé affiché est synchronisé avec options.

import { useState } from 'react'
import { BjCombobox } from '@flrxnt/dsbj/react'

const options = [
  { value: 'a', label: 'Alpha' },
  { value: 'b', label: 'Bravo' },
]

export default function App() {
  const [value, setValue] = useState('a')
  return (
    <BjCombobox
      value={value}
      onValueChange={setValue}
      options={options}
      label="Code"
    />
  )
}

Erreur et message

error, message et aria-invalid sur le champ.

Obligatoire

Choisissez une valeur.

import { useState } from 'react'
import { BjCombobox } from '@flrxnt/dsbj/react'

const options = [{ value: 'x', label: 'Seul choix' }]

export default function App() {
  const [v, setV] = useState('')
  return (
    <BjCombobox
      value={v}
      onValueChange={setV}
      options={options}
      label="Obligatoire"
      error={!v}
      message={v ? '' : 'Choisissez une valeur.'}
      placeholder="Rechercher…"
    />
  )
}

Désactivé

disabled sur l’input et fermeture du panneau.

Verrouillé

import { BjCombobox } from '@flrxnt/dsbj/react'

const options = [{ value: '1', label: 'Un' }]

export default function App() {
  return (
    <BjCombobox value="1" onValueChange={() => {}} options={options} label="Verrouillé" disabled />
  )
}

Aucun résultat

noResults quand le filtre ne retourne aucune option.

Rien ne correspond

import { useState } from 'react'
import { BjCombobox } from '@flrxnt/dsbj/react'

const options = [{ value: 'only', label: 'Unique' }]

export default function App() {
  const [v, setV] = useState('')
  return (
    <BjCombobox
      value={v}
      onValueChange={setV}
      options={options}
      noResults="Rien ne correspond"
      placeholder="Tapez pour filtrer…"
    />
  )
}

Combinaisons

label, hint, placeholder, error et options avec entrée désactivée.

SKUPremium sur devis

Requis.

import { useState } from 'react'
import { BjCombobox } from '@flrxnt/dsbj/react'

const options = [
  { value: 'std', label: 'Standard' },
  { value: 'prem', label: 'Premium', disabled: true },
]

export default function App() {
  const [sku, setSku] = useState('')
  return (
    <BjCombobox
      className="my-combobox"
      value={sku}
      onValueChange={setSku}
      label="SKU"
      hint="Premium sur devis"
      placeholder="Filtrer la gamme…"
      options={options}
      error={!sku}
      message={sku ? `Sélection : ${sku}` : 'Requis.'}
    />
  )
}

Callbacks

onValueChange à la sélection ; filtre sur la saisie déclenche l’ouverture de la liste.

import { useState } from 'react'
import { BjCombobox } from '@flrxnt/dsbj/react'

const options = [
  { value: 'cotonou', label: 'Cotonou' },
  { value: 'porto', label: 'Porto-Novo' },
]

export default function App() {
  const [city, setCity] = useState('')
  function onPick(next: string) {
    console.log('selected', next)
    setCity(next)
  }
  return (
    <BjCombobox
      id="city-combobox"
      value={city}
      onValueChange={onPick}
      options={options}
      label="Ville"
    />
  )
}

Props

Prop	Description
`value`	Valeur sélectionnée, chaîne.
`onValueChange`	Callback appelé avec la nouvelle valeur lors de la sélection.
`label`	Libellé au-dessus du champ.
`hint`	Texte d’aide sous le libellé.
`options`	Tableau d’objets avec value, label et disabled optionnel.
`error`	Applique le style d’erreur et aria-invalid.
`message`	Message sous le champ.
`disabled`	Désactive le combobox.
`placeholder`	Placeholder du champ.
`noResults`	Texte quand aucune option ne correspond.
`id`	Identifiant ; sinon généré automatiquement.
`className`	Classe CSS sur le conteneur bj-combobox.
`…`	Autres attributs HTML natifs de l’input.