Champs de saisie

Searchable Select

Un bouton qui ouvre une petite fenêtre contextuelle avec un champ de recherche et une liste d'options filtrables, afin que quelqu'un puisse taper pour affiner les choix au lieu de faire défiler une longue liste déroulante.

New project

Pick the framework this repo will build with.

Framework

Build command

—

Dev port

—

Nothing chosen yet. Search or scroll to pick one.

Utiliser Searchable Select

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: accent, placeholder, searchPlaceholder, optionCount

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les portages, l’installation et le panneau de propriétés sont inclus dans Fieldbook Pro. L’aperçu interactif est ouvert à tous.

Connectez votre agent

Composants proches

2761Combobox fieldChamps de saisieUn champ déroulant consultable : la saisie filtre une liste d'options en direct et en choisir une remplit le champ.

2768Filtered suggestion fieldChamps de saisieUn champ de texte qui filtre une liste de suggestions au fur et à mesure que vous tapez et affiche les correspondances dans une liste déroulante ci-dessous, avec une navigation au clavier et un bouton clair.

2762Command search paletteChamps de saisieUn champ de recherche qui dépose une liste filtrée de commandes sous lui-même au fur et à mesure que vous tapez, avec une mise en surbrillance des touches fléchées, une sélection au survol et un pied de page d'indication de clavier.

2801Compact select menuChamps de saisieUn bouton de déclenchement qui ouvre une liste flottante de choix, avec le choix actuel affiché sur le bouton et une coche à côté dans la liste.

2796Grouped select menuChamps de saisieUne sélection déroulante dont les options sont regroupées sous les en-têtes de section, avec des bandes de flèches de bord qui font défiler automatiquement les longues listes.

2783Styled native dropdownChamps de saisieUne sélection native relookée avec une bordure personnalisée, une bague de mise au point et un chevron tandis que le système d'exploitation continue de fournir le menu d'options et le comportement du clavier.