Headless – это библиотека компонентов без стилей, но с хорошей поддержкой доступности. Разрабатывается командой Tailwind CSS.
Вышел релиз мажорной версии Headless 2.0. Что нового:
- Интеграция Floating UI для правильного позиционирования якоря дропдауна.
- Новый компонент checkbox.
- Обертки над нативными элементами формы: Fieldset, Field, Label, Input, Select и другие. Внутри них связываются лейбл и поле через ID, добавляются aria-* атрибуты и т.д. Пример использования:
import { Description, Field, Input, Label } from '@headlessui/react'
function Example({ disabled }) {
return (
<Field disabled={disabled}>
<Label>Name</Label>
<Input name="your_name" />
<Description>Use your real name so people will recognize you.</Description>
</Field>
)
}
- Добавили data атрибуты к элементам для hover, active, focus состояний. Под капотом используются хуки из React Aria. Может пригодиться для стилизации элементов.
- Интеграция TanStack Virtual для виртуализации списка в Combobox.
- Новый сайт и улучшенная документация.
https://tailwindcss.com/blog/headless-ui-v2
