Add Switch Attribute Explainer#1470
Conversation
👷 Deploy request for open-ui pending review.Visit the deploys page to approve it
|
|
|
||
| | Vendor | Position | Notes | | ||
| |---|---|---| | ||
| | WebKit/Safari | **Positive** (shipped) | Available behind flag since Safari 17.4 | |
There was a problem hiding this comment.
The flag is only for the pseudo-elements. The feature itself has no guard.
|
Also how does this relate to #1376? |
|
|
||
| There is a [switch element proposal at Open UI](https://open-ui.org/components/switch.explainer/) that would introduce a standalone `<switch>` element. This explainer focuses on the attribute approach (`<input type="checkbox" switch>`). See [Alternatives Considered](#alternatives-considered) for a comparison. | ||
|
|
||
| An implementation of the attribute approach was already introduced by Safari Technology Preview and Safari Beta (https://github.com/whatwg/html/pull/9546#issuecomment-1865357407). |
There was a problem hiding this comment.
It's shipped in stable Safari.
| Adding the `switch` attribute to a checkbox changes its appearance to a switch control. The control exposes two pseudo-elements for styling: | ||
|
|
||
| - **`::track`** — the background track of the switch | ||
| - **`::thumb`** — the sliding knob/indicator |
There was a problem hiding this comment.
These are out of sync with what is proposed in css-forms I think we should defer to that spec for what's actually proposed and just write the explainer on the basis of what is proposed there. If we need to make changes we can as the pseudos never shipped.
Let's keep and link to it, don't delete it but keep the same URL so that anyone that linked to the prior one it still functions as expected. There's valid research in the prior one that we should retain |
4 participants
Add Switch Attribute Explainer