BjSelect

Liste déroulante React contrôlée avec libéllé, aide, placeholder, tableau d’options. Supporte un mode recherche via la prop searchable.

Utilisation

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

const options = [
  { value: 'dg', label: 'Direction générale' },
  { value: 'dr', label: 'Direction régionale' },
]

export default function Example() {
  const [dept, setDept] = useState('')
  return (
    <BjSelect
      value={dept}
      onChange={(e) => setDept(e.target.value)}
      label="Direction"
      hint="Choisir une direction dans la liste"
      placeholder="Sélectionner…"
      options={options}
    />
  )
}

Aperçu

DirectionChoisir une direction dans la liste

onChange et onValueChange

onChange reçoit l’événement natif ; onValueChange reçoit la chaîne (natif et searchable).

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

const options = [{ value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }]

export default function Example() {
  const [v, setV] = useState('')
  return (
    <BjSelect
      value={v}
      onChange={(e) => console.log('native', e.target.value)}
      onValueChange={setV}
      options={options}
      label="Les deux callbacks"
    />
  )
}

Erreur et message

error et message ensemble pour la validation.

Champ requis

Veuillez sélectionner une valeur.

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

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

export default function Example() {
  const [v, setV] = useState('')
  return (
    <BjSelect
      value={v}
      onValueChange={setV}
      label="Champ requis"
      error={!v}
      message={v ? '' : 'Veuillez sélectionner une valeur.'}
      placeholder="Sélectionner…"
      options={options}
    />
  )
}

Désactivé et enfants

placeholder, options désactivées et children en option natives.

Groupes

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

export default function Example() {
  const [v, setV] = useState('')
  return (
    <BjSelect value={v} onValueChange={setV} label="Groupes" disabled placeholder="Choisir…">
      <optgroup label="Groupe 1">
        <option value="1">Un</option>
        <option value="2">Deux</option>
      </optgroup>
    </BjSelect>
  )
}

Recherche : textes et filtre

searchPlaceholder, noResults et filtre sur le libellé.

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

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

export default function Example() {
  const [city, setCity] = useState('')
  return (
    <BjSelect
      value={city}
      onValueChange={setCity}
      searchable
      searchPlaceholder="Filter cities…"
      noResults="No match"
      options={options}
      label="City"
    />
  )
}

Combinaisons

Select avec hint, placeholder, erreur et option désactivée.

OffrePremium sur demande

Requis.

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

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

export default function Example() {
  const [plan, setPlan] = useState('')
  return (
    <BjSelect
      value={plan}
      onValueChange={setPlan}
      label="Offre"
      hint="Premium sur demande"
      placeholder="Choisir une offre…"
      options={options}
      error={!plan}
      message={plan ? `Sélection : ${plan}` : 'Requis.'}
    />
  )
}

Patron contrôlé

value + onChange ou onValueChange pour un état contrôlé.

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

const options = [
  { value: 'dg', label: 'Direction générale' },
  { value: 'dr', label: 'Direction régionale' },
]

export default function Example() {
  const [dept, setDept] = useState('')
  return (
    <BjSelect
      value={dept}
      onChange={(e) => setDept(e.target.value)}
      label="Direction"
      hint="Choisir une direction dans la liste"
      placeholder="Sélectionner…"
      options={options}
    />
  )
}

Mode recherche

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

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

export default function Example() {
  const [city, setCity] = useState('')
  return (
    <BjSelect
      value={city}
      onValueChange={setCity}
      label="Commune"
      placeholder="Sélectionner…"
      options={cities}
      searchable
    />
  )
}

Commune

Props

Prop	Description
`value`	Valeur sélectionnée, chaîne.
`onChange`	Gestionnaire de changement sur le select natif.
`onValueChange`	Callback avec la nouvelle valeur (fonctionne en mode natif et searchable).
`label`	Libéllé au-dessus du select.
`hint`	Texte d’aide sous le libéllé.
`options`	Tableau d’objets value, label et disabled optionnel.
`error`	Si vrai, applique le style d’erreur et aria-invalid.
`message`	Message sous le champ (couleur selon error).
`disabled`	Désactive le select.
`placeholder`	Première option vide, désactivée, avec ce libéllé.
`searchable`	Active le mode recherche avec dropdown custom.
`searchPlaceholder`	Placeholder du champ de recherche.
`noResults`	Texte quand aucune option ne correspond.
`id`	Identifiant du select ; sinon généré automatiquement.
`children`	Options ou nœuds React supplémentaires (mode natif uniquement).
`className`	Classe CSS sur le select (mode natif) ou sur le groupe (mode searchable).
`…`	Autres attributs HTML natifs du select.