Render accessible searchable Combobox selections in React forms with Zag.js.
npx skills add https://github.com/TechsioCZ/new-engine --skill combobox-usage
Please help me install this Agent Skill. Skill: combobox-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/combobox-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill combobox-usage
Many apps need a reliable, accessible dropdown with search capabilities and stable UX; combobox-usage provides a ready-to-use solution from @techsio/ui-kit to implement searchable, controlled selections with Zag.js collection behavior, multiple mode, and token styling.
Import the Combobox component and render it with an items list and an onChange handler to enable a searchable, multi-mode selection in your form.
High-intent search queries and answers about installing and using this skill.
To add a searchable dropdown in React, import the Combobox component from @techsio/ui-kit and provide an items list with an onChange handler. It leverages Zag.js collection behavior to render an accessible, controlled selection input.
Yes, the combobox supports multiple selection mode with token styling. You can enable this by configuring the component to allow multiple selections, rendering selected items as tokens within your web forms.
Yes, the combobox supports validation states through the validateStatus property. This allows you to integrate the searchable input directly into existing form validation flows and display error or success UI feedback.
Zag.js provides the underlying collection behavior for the searchable selection input, ensuring stable UX with full keyboard navigation. This allows users to navigate, select, and clear items without relying solely on mouse interactions.
The best way to manage controlled values is using the component's controlled value and inputValue properties. This ensures the searchable input's state stays synchronized with your React application's form data during user interactions.
You can make a searchable dropdown clearable by enabling the clearable property on the Combobox component. This allows users to quickly remove their selected single or multiple selections from the input field.
TechsioCZRender labeled single or multiple selects with Zag.js in React apps.
simplysmartaiValidate data with Pydantic for Python and Zod for TypeScript.
TechsioCZRender accessible labeled checkboxes with validation using FormCheckbox and ZagJS.
keenthemesCreate searchable multi-select dropdowns with tags and remote data.
