Skip to content

Commit 9ae672a

Browse files
committed
docs(switch): improve README
1 parent 9ec9b83 commit 9ae672a

1 file changed

Lines changed: 7 additions & 5 deletions

File tree

elements/pf-v6-switch/README.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff 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 |

0 commit comments

Comments
 (0)