Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.
Een toggle is als een schakelaar tussen verschillende toestanden. Je wisselt tussen opties zoals weergave, sortering of filters. Bij een toggle verander je de huidige toestand naar een andere toestand. Zoals bij lijst/raster weergave, oplopend/aflopend sorteren, enz.
Gebruik een toggle:
- Voor het wisselen tussen verschillende weergaven
- Voor het omkeren van sortering (oplopend, aflopend)
- Voor het schakelen tussen normale en hoge contrast
Technische opbouw
- (4.1.2) Een toggle moet een
<button>-element gebruiken - (2.4.6) Een toggle moet een toegankelijke naam hebben die de actie beschrijft
- (4.1.2) Een ingedrukte toggle moet
aria-pressed="true"hebben - (4.1.2) Een niet-ingedrukte toggle moet
aria-pressed="false"hebben
Component staten
- (4.1.2) Uitgeschakeld:
disabled
Toetsenbordbediening
- Enter of Spatie:
- Wisselt naar de andere staat
Voorbeeld toggle
See the Pen Toggle by Niek (@niekd) on CodePen.
Bronnen
- Toggle Buttons (Engelstalig)