search

op-ent / unstyled-ui

https://github.com/op-ent/op-ent/tree/main/packages/shared-ui
MIT License
6 stars 1 forks source link

Add a `Switch` component #1

Open florian-lefebvre opened 2 years ago

florian-lefebvre commented 2 years ago

We have to decide which library to use for this, either Headless UI or Radix UI Primitives.

florian-lefebvre commented 2 years ago

Cc @op-ent/frontend

NonozgYtb commented 2 years ago
My opinion : Name of lib HeadlessUI Radix UI (Primitives)
Package architecture Contained in the global package @headlessui/react Specific package for this component (@radix-ui/react-switch)
Components Switch / Group / Label / Description Switch (visual) / Root (HTML) : Label have to be added manually
Accessibility Great support / Keyboard : Space / Toggle on label or switch click Great Support / Keyboard : Space, Enter / More attrib than the other

The headless ui switch is easier to use and has more components. The Radix one is less complete but takes well into account the attributes (notably data- and aria-). I think that headless-ui should be used but with respect to the W3C's specifications.

( based on the docs and their examples included only )

florian-lefebvre commented 2 years ago

Awesome analysis! Let's go with the Headless ui Switch then

florian-lefebvre commented 2 years ago

I think we should really consider https://zagjs.com/ when choosing components (even though it doesn't provide logic for a switch component), it's really interesting (and might allow us to build this lib for multiple js frameworks).

florian-lefebvre commented 2 years ago

In fact we could use @zag-js/toggle.