TogglePill Toggle pills are used to indicate whether an option has been selected
Examples swarm
Grow TogglePill (full width)
Reset TogglePill (no styling)
Props Snippets < >
< TogglePilllabel = " swarm" checked = { 1 == 1 } name = " test-1" /> < TogglePillchecked = { 1 == 0 } name = " test-1" > </ TogglePill> < / >
swarm Swarm Toggle
a11y Pass aria-label to provide a more specific label to be used with screen readers. Toggle Pills should support keyboad interaction with both space and enter keys.
Toggle Switch Toggle switches are used to indicate whether something is on or off.
Examples Toggle Switch Props Name Type Required? Default Description checked boolean required none Indicated whether the toggle is selected disabled boolean optional none Indicated whether the toggle is disabled onChange signature optional none Action to be performed when the toggle is interacted with
Snippets < >
< Togglechecked = { 1 == 1 } name = " test-1" /> < Togglechecked = { 1 == 0 } name = " test-1" /> < / >
a11y Remember to associate the label to the Toggle. Toggles should support keyboad interaction with both space and enter keys.
alert--small alert announce--small announce archive--small archive arrow-left--small arrow-left arrow-right--small arrow-right audio--small audio badge--small badge block--small block bolt--small bolt calendar--small calendar-check--small calendar-check calendar-cross--small calendar-cross calendar-plus--small calendar-plus calendar camera--small camera check--small check-circle--small check-circle check chevron-down--small chevron-down chevron-left--small chevron-left chevron-right--small chevron-right chevron-up--small chevron-up clock--small clock-arrow--small clock-arrow clock cog--small cog conversation--small conversation copy--small copy creditcard--small creditcard cross--small cross-circle--small cross-circle cross-circled--small cross-circled cross download--small download drinks--small drinks edit--small edit export--small export external-facebook external-facebookboxed external-flickr external-gmail external-instagram external-linkedin external-medium external-messenger-outlined--small external-messenger-outlined external-outlook external-tumblr external-yahoo external-youtube filter--small filter folder--small folder globe--small globe grid--small grid groups--small groups heart--small heart-outline--small heart-outline heart hide--small hide home--small home info--small info invite--small invite-filled--small invite-filled invite launch-new-window--small launch-new-window link--small link list--small list location-pin--small location-pin-filled--small location-pin-filled location-pin-slashed--small location-pin-slashed location-pin location-services--small location-services lock--small lock mail--small mail meetup-m--small meetup-m messages--small messages microphone--small microphone minus--small minus notifications--small notifications-badged--small notifications-badged notifications-mute--small notifications-mute notifications overflow--small overflow-vertical--small overflow-vertical overflow photo-album--small photo-album-add--small photo-album-add photo-album play--small play plus--small plus-circle--small plus-circle plus profile--small profile profiles--small profiles projector--small projector pulse--small pulse refresh--small refresh reply--small reply search--small search send--small send sent-messages--small sent-messages show--small show sort-direction--small sort-direction star--small star-rounded--small star-rounded star textblock--small textblock ticket--small ticket trash--small trash tune--small tune tv--small tv updates--small updates wifi--small wifi 