KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptDark modeRTLReferencesChangelog - v1.0.12Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCheckboxCollapseDatatableDatepickerSoonDismissDrawerDropdownImage InputInputUpdateKbdLinkModalPaginationProgressRadio GroupReparentScrollableScrollspyUpdateScrolltoSelectSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToastNewTooltipToggleToggle GroupToggle PasswordTooltip
©2025 KtUI. All rights reserved.
A project by Keenthemes
Docs
Switch

Switch

A control that allows the user to toggle between checked and unchecked states.

Examples

Basic Usage

<div class="flex items-center gap-2">
  <input class="kt-switch" type="checkbox" id="switch" /><label
    class="kt-label"
    for="switch"
    >Auto update</label
  >
</div>

Checked

<div class="flex items-center gap-2">
  <input
    class="kt-switch kt-switch-mono"
    type="checkbox"
    id="switch"
    checked=""
  /><label class="kt-label" for="switch">Checked</label>
</div>

Disabled

<div class="flex items-center gap-2">
  <input
    class="kt-switch kt-switch-mono"
    type="checkbox"
    id="switch"
    disabled=""
    checked=""
  /><label class="kt-label" for="switch">Disabled</label>
</div>

Error

<div class="flex items-center gap-2">
  <input
    class="kt-switch"
    type="checkbox"
    aria-invalid="true"
    id="switch"
  /><label class="kt-label" for="switch">Auto update</label>
</div>

Mono

<div class="flex items-center gap-2">
  <input
    class="kt-switch kt-switch-mono"
    type="checkbox"
    id="switch"
    checked=""
  /><label class="kt-label" for="switch">Auto update</label>
</div>

Size

<div class="space-y-4">
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      class="kt-switch kt-switch-sm"
      id="switch_1"
      checked=""
      value="1"
    /><label class="kt-label" for="switch_1">Small</label>
  </div>
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      class="kt-switch"
      id="switch_2"
      checked=""
      value="1"
    /><label class="kt-label" for="switch_2">Default</label>
  </div>
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      class="kt-switch kt-switch-lg"
      id="switch_3"
      checked=""
      value="1"
    /><label class="kt-label" for="switch_3">Large</label>
  </div>
</div>

Form

<form class="kt-form">
  <div class="kt-form-item">
    <div class="kt-form-control kt-form-control-inline">
      <input type="checkbox" class="kt-switch" id="check" value="1" /><label
        class="kt-form-label"
        for="check"
        >Auto update</label
      >
    </div>
    <div class="kt-form-description">Please provide update mode.</div>
    <div class="kt-form-message">You need to specify update mode.</div>
  </div>
  <div class="kt-form-actions justify-start">
    <button type="reset" class="kt-btn kt-btn-outline">Reset</button
    ><button type="submit" class="kt-btn">Submit</button>
  </div>
</form>
PreviouseStickyNextTabs

On This Page

  • Examples
    • Basic Usage
    • Checked
    • Disabled
    • Error
    • Mono
    • Size
    • Form