Suppers Software Logo
HomeUI Components
ButtonDropdownLoginButtonModalSearchButtonSearchModalSwapThemeController
AccordionAvatarBadgeCardCarouselChat BubbleCollapseCountdownDiffKbdLogoStatTableTimelineUserInfo
BreadcrumbsDockLinkMenuNavbarPaginationSidebarStepsTabsUserProfileDropdown
CheckboxColorInputDateInputDatetimeInputEmailInputFile InputInputNumberInputPasswordInputRadioRangeRatingSelectTextareaTimeInputToggle
ArtboardDividerDrawerFooterHeroIndicatorJoinMaskStack
AlertLoadingProgressRadial ProgressSkeletonToastTooltip
BrowserCodePhoneWindow

Toggle

On/off switches for binary state controls and settings

  • Home
  • Components

Basic Toggle

Simple on/off toggle switches

Show Code

Toggle Sizes

Different sizes for various contexts

Show Code

Toggle Colors

Various color themes

Show Code

Toggle States

Different states and configurations

Show Code

Toggle Groups

Multiple toggles for settings panels

Show Code

Usage Notes

  • Use toggles for immediate binary state changes (on/off)
  • Provide clear labels to indicate what the toggle controls
  • Use appropriate colors to convey meaning (success for enabled features)
  • Consider grouping related toggles in settings panels
  • Disabled state should be used when toggle cannot be changed
  • Toggle automatically includes proper form control structure
Components
UI LibraryBrowse AllGetting Started
Builder
Generate AppTemplatesAPI Reference
Resources
DocumentationDenodaisyUI

© 2025 Suppers Software Limited. Built with Deno, Fresh, Preact & DaisyUI.