zen
DocumentationPlayground
Getting started
IntroductionInstallationUsage Guide
ColorsFontsSpacingBordersShadowsBreakpointsThemesCustomization
BoxFlexboxGridContainer
TextHeadingCodeBlockquote
Page headerAspect ratioResizableScroll areaSeparator
Overview
AutocompleteCheckboxCheckbox groupComboboxDate pickerInput groupNumber fieldOTP FieldPassword fieldRadio groupSearch fieldSelectSliderSwitchText fieldToggleToggle group
BreadcrumbsButtonButton groupCommandContext menuHover triggerLoading buttonMenuMenubarNavbarPaginationTabsToolbarTheme buttonTheme switcher
AlertAlert dialogConfirmation dialogDialogDrawerEmptyLoadingMeterModalPopoverPreview cardProgress barProgress circleSheetSkeletonStatus lightToastTooltip
AccordionAvatarBadgeCalendarCarouselCollapsibleData cardData tableIconImageKbdListTableTag group
Form Inputs

Toggle

A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.

Component props#

NameTypeDescription
labelstringLabel text displayed above the toggle
isSelectedbooleanControlled selected state
defaultSelectedbooleanDefault selected state
isDisabledbooleanDisables the toggle
onChange(isSelected: boolean) => voidCalled when state changes
PreviousText fieldNextToggle group
On this page
Component props
Powered by shiso