Select

Documentation de cbk-toolkit

Select

Liste déroulante avec flèche SVG personnalisée, ref forwarding et support de toutes les props HTML natives. Livré avec le composant Option.

Démo en direct — sélections
La flèche native est remplacée par une icône SVG personnalisée.
Code source complet — copier-coller

Exemple d'un champ select avec label et options.

"use client";

import { useState } from "react";
import { Select, Option } from "@ramses1er/cbk-toolkit/client";

export default function RoleSelect() {
  const [role, setRole] = useState("");

  return (
    <div>
      <label className="font-semibold text-gray-600 block">Rôle</label>
      <Select
        value={role}
        onChange={(e) => setRole(e.target.value)}
      >
        <Option value="">Choisissez le rôle</Option>
        <Option value="admin">Administrateur</Option>
        <Option value="user">Utilisateur</Option>
        <Option value="manager">Gestionnaire</Option>
      </Select>
    </div>
  );
}
Utilisation — avec FieldContainer et Label

Pattern standard dans les projets d'administration : combiner FieldContainer , Label et Select pour des formulaires homogènes.

import { FieldContainer, Label, Select, Option } from "@ramses1er/cbk-toolkit/client";

<FieldContainer>
  <Label>Rôle</Label>
  <Select
    value={form.roleId}
    onChange={(e) => setForm({ ...form, roleId: e.target.value })}
  >
    <Option value="">Choisissez le rôle</Option>
    {roles.map((role) => (
      <Option key={role.id} value={role.id}>
        {role.name}
      </Option>
    ))}
  </Select>
</FieldContainer>
Props
PropTypeDéfautDescription
classNamestring—Classes Tailwind supplémentaires
refReact.Ref<HTMLSelectElement>—Ref forwarding vers l'élément <select> natif
...propsSelectHTMLAttributes—Toutes les props HTML natives (value, onChange, disabled, etc.)

Option

PropTypeDéfautDescription
refReact.Ref<HTMLOptionElement>—Ref forwarding vers l'élément <option> natif
...propsOptionHTMLAttributes—Toutes les props HTML natives (value, disabled, etc.)
Comportement
  • La flèche native du <select>est remplacée par une flèche SVG personnalisée
  • Style appearance-nonepour masquer l'apparence native du navigateur
  • La flèche SVG est appliquée via backgroundImage en position right 0.75rem center
  • Supporte le ref forwardingpour un accès direct au DOM
  • Les classes de base incluent le focus ring, les bordures arrondies et la transition