[RFC][base-ui][Switch] The input component should be opt-in

[DiegoAndai]

What's the problem?

The docs and demos related to the Switch component include the hidden checkbox input. This is not a common pattern when building Switch components, and it might be confusing.

What are the requirements?

Simplify the switch component and hook for the base use case.

What are our options?

• Keep it as is
• Make the input opt-out
• Make the input opt-in

Proposed solution

The input component should be opt-in, meaning:

• the useSwitch hook should work without it. The input component is helpful for form submission so that I wouldn't remove it, but it's not a common enough use case to have it by default.
• The Switch component shouldn't include the input by default
• The docs and demos shouldn't include the input. There should be a separate demo for adding the input for the specified use case

Resources and benchmarks

• https://www.w3.org/WAI/ARIA/apg/patterns/switch/
• https://www.radix-ui.com/primitives/docs/components/switch
• https://react-spectrum.adobe.com/react-aria/Switch.html

Search keywords:

[Nikhilh26]

hey ! i would like to contribute to this but i am unable to reproduce and check on my local system to verify the changes i have made are solving the problem or not. Can you guide me on this. Thanks!

[DiegoAndai]

Hi @Nikhilh26, thanks for the interest. This RFC has no decision yet, so the following steps are unclear. In other words, the issue is not ready to be worked on. I recommend looking for issues with the ready to take label instead.

[michaldudak]

We used to have a similar discussion around the Select. At first, the hidden input was rendered only when the name prop was present (to participate in form submission), but we ended up needing it for more than this (built-in browser form validation, autofill), so now it's always rendered.
I think the Switch should behave the same way. The checkbox doesn't necessarily have to be styled, but IMO it should be present.

[DiegoAndai]

Fair enough. I did a proper benchmark, and other unstyled libraries have it as well:

• In Radix the input is added only when the switch is inside a form. The switch role is on the button: https://www.radix-ui.com/primitives/docs/components/switch#root
• In React Aria, it seems it is always added. The switch role is on the input: https://react-spectrum.adobe.com/react-aria/Switch.html#example

In any case we're missing the switch role, but that's the topic for #40615 so I'm closing this.