Headless UI v1.5: El que tiene Comboboxes

Acabamos de lanzar Headless UI v1.5, que incluye un nuevo componente Combobox. Los Comboboxes son como controles select pero con funcionalidad de autocompletado/typeahead, y son una gran alternativa a un select regular cuando trabajas con grandes conjuntos de datos y quieres filtrar rápidamente la opción correcta.

Como todos los demás componentes de Headless UI, el combobox abstrae todas las consideraciones complejas de accesibilidad pero deja el estilo completamente a tu cargo, dándote control total para diseñar exactamente el combobox que deseas sin preocuparte por cosas como la navegación por teclado o el soporte para lectores de pantalla.

Aquí tienes una demostración rápida si quieres verlo en acción:

Lo hemos diseñado intencionalmente para que tengas control total sobre el filtrado de los resultados reales. Puedes hacer comparaciones básicas de cadenas, usar una librería de búsqueda difusa como Fuse.js, o incluso hacer solicitudes del lado del servidor a una API — lo que tenga sentido para tu proyecto.

Así es como se ve filtrar los resultados usando una comparación básica de cadenas:

import { useState } from 'react'
import { Combobox } from '@headlessui/react'
const people = [
  'Wade Cooper',
  'Arlene McCoy',
  'Devon Webb',
  'Tom Cook',
  'Tanya Fox',
  'Hellen Schmidt',
]
function MyCombobox() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')
  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.toLowerCase().includes(query.toLowerCase())
        })
  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson}>
      <Combobox.Input onChange={(event) => setQuery(event.target.value)} />
      <Combobox.Options>
        {filteredPeople.map((person) => (
          <Combobox.Option key={person} value={person}>
            {person}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>
  )
}

Paletas de comandos

Los Comboboxes no solo son geniales como inputs independientes, sino que también pueden usarse como una primitiva de nivel inferior para construir componentes más complejos, como paletas de comandos.

Esto es en realidad lo que nos motivó originalmente a crear el componente combobox en primer lugar — queríamos agregar una nueva categoría de paletas de comandos a Tailwind UI y necesitábamos este componente para hacerlo realidad.

Si tienes una licencia de Tailwind UI, asegúrate de explorar la nueva categoría Command Palettes para ver cómo quedaron. Y si te lo preguntas, también agregamos una nueva categoría Comboboxes.

Aprovechando la emoción de las nuevas paletas de comandos, también acabamos de publicar un nuevo screencast detallado sobre cómo construir una paleta de comandos desde cero con Tailwind CSS, React y Headless UI.

Cubre montones de trucos interesantes de Tailwind para lograr el diseño y las animaciones perfectas, y te enseña muchísimo sobre cómo usar el nuevo componente combobox e integrarlo en tu aplicación.

Pruébalo

Si ya tienes Headless UI instalado en tu proyecto, asegúrate de actualizar a la v1.5 para obtener el nuevo componente Combobox. Esta es una actualización menor, por lo que no hay cambios disruptivos.

# Para React
npm install @headlessui/react
# Para Vue
npm install @headlessui/vue

Asegúrate también de revisar el sitio web oficial para la documentación más reciente.