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
Checkbox

Checkbox

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

Examples

Basic Usage

<div class="flex items-center gap-2">
  <input type="checkbox" class="kt-checkbox" id="check" value="1" /><label
    class="kt-label"
    for="check"
    >Accept terms and conditions</label
  >
</div>

Checked

<div class="flex items-center gap-2">
  <input
    type="checkbox"
    class="kt-checkbox"
    id="check"
    checked=""
    value="1"
  /><label class="kt-label" for="check">Accept terms and conditions</label>
</div>

Disabled

<div class="flex items-center gap-2">
  <input
    type="checkbox"
    class="kt-checkbox"
    disabled=""
    id="check"
    checked=""
    value="1"
  /><label class="kt-label" for="check">Accept terms and conditions</label>
</div>

Indeterminate

<div class="flex items-center gap-2">
  <input type="checkbox" class="kt-checkbox" id="check" value="1" /><label
    class="kt-label"
    for="check"
    >Accept terms and conditions</label
  >
</div>

Mono

<div class="flex items-center gap-2">
  <input
    type="checkbox"
    class="kt-checkbox kt-checkbox-mono"
    id="check"
    checked=""
    value="1"
  /><label class="kt-label" for="check">Accept terms and conditions</label>
</div>

Size

<div class="space-y-4">
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      class="kt-checkbox kt-checkbox-sm"
      id="check_1"
      checked=""
      value="1"
    /><label class="kt-label" for="check_1">Small</label>
  </div>
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      class="kt-checkbox"
      id="check_2"
      checked=""
      value="1"
    /><label class="kt-label" for="check_2">Default</label>
  </div>
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      class="kt-checkbox kt-checkbox-lg"
      id="check_3"
      checked=""
      value="1"
    /><label class="kt-label" for="check_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-checkbox" id="check" value="1" /><label
        class="kt-form-label"
        for="check"
        >Accept terms and conditions</label
      >
    </div>
    <div class="kt-form-description">
      Please accept the terms and conditions.
    </div>
    <div class="kt-form-message">You need to agree to proceed.</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>
PreviouseCardNextCollapse

On This Page

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