File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -13,13 +13,14 @@ explicit, visible representation on a setting.
1313### Without visible label
1414
1515``` html
16- <pf-v6-switch accessible-label =" Wi-Fi" checked ></pf-v6-switch >
16+ <pf-v6-switch accessible-label =" Wi-Fi" show-check-icon checked ></pf-v6-switch >
1717```
1818
19- ### With check icon
19+ ### With external label
2020
2121``` html
22- <pf-v6-switch checked show-check-icon >Notifications</pf-v6-switch >
22+ <pf-v6-switch id =" wifi" ></pf-v6-switch >
23+ <label for =" wifi" >Wi-Fi</label >
2324```
2425
2526## Divergences from React ` Switch `
@@ -41,12 +42,13 @@ explicit, visible representation on a setting.
4142| ` hasCheckIcon ` | ` show-check-icon ` | Attribute name carried over from v5 for clarity |
4243| ` aria-label ` | ` accessible-label ` | Abstracted behind custom attribute per PFE convention |
4344| ` aria-labelledby ` | External ` <label for="id"> ` | Use native label association instead |
44- | ` onChange ` | ` change ` event | Standard DOM event instead of React callback |
45+ | ` onChange ` | ` change ` event | Standard DOM event; cancelable via ` preventDefault() ` to reject state change |
4546
4647### Added
4748
4849| Web component API | Notes |
4950| ---| ---|
50- | ` data-state="on\|off" ` on slotted children | Show different label text per state; children hidden/shown automatically |
5151| External ` <label> ` support | FACE element works with native ` <label for="id"> ` or nesting in ` <label> ` |
5252| Form association | Submits ` "on" ` when checked, omitted when unchecked (matches native checkbox) |
53+ | Form reset | Reverts to initial ` checked ` value on form reset |
54+ | Cancelable ` change ` event | Call ` preventDefault() ` to reject the toggle and revert state |
You can’t perform that action at this time.
0 commit comments