<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v5.2.0
* @link https://coreui.io/product/free-bootstrap-admin-template/
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
-->
<html lang="en">
<head>
<base href="./../">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
<title>CoreUI Free Bootstrap Admin Template</title>
<link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Vendors styles-->
<link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.css">
<link rel="stylesheet" href="css/vendors/simplebar.css">
<!-- Main styles for this application-->
<link href="css/style.css" rel="stylesheet">
<!-- We use those styles to show code examples, you should remove them in your application.-->
<link href="css/examples.css" rel="stylesheet">
<script src="js/config.js"></script>
<script src="js/color-modes.js"></script>
<link rel="canonical" href="https://coreui.io/docs/forms/checks-radios/">
</head>
<body>
<div class="sidebar sidebar-dark sidebar-fixed border-end" id="sidebar">
<div class="sidebar-header border-bottom">
<div class="sidebar-brand">
<svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
<use xlink:href="assets/brand/coreui.svg#full"></use>
</svg>
<svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
<use xlink:href="assets/brand/coreui.svg#signet"></use>
</svg>
</div>
<button class="btn-close d-lg-none" type="button" data-coreui-theme="dark" aria-label="Close" onclick="coreui.Sidebar.getInstance(document.querySelector("#sidebar")).toggle()"></button>
</div>
<ul class="sidebar-nav" data-coreui="navigation" data-simplebar>
<li class="nav-item"><a class="nav-link" href="index.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer"></use>
</svg> Dashboard<span class="badge badge-sm bg-info ms-auto">NEW</span></a></li>
<li class="nav-title">Theme</li>
<li class="nav-item"><a class="nav-link" href="colors.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-drop"></use>
</svg> Colors</a></li>
<li class="nav-item"><a class="nav-link" href="typography.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-pencil"></use>
</svg> Typography</a></li>
<li class="nav-title">Components</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-puzzle"></use>
</svg> Base</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="base/accordion.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Accordion</a></li>
<li class="nav-item"><a class="nav-link" href="base/breadcrumb.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Breadcrumb</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/components/calendar/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Calendar
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="base/cards.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Cards</a></li>
<li class="nav-item"><a class="nav-link" href="base/carousel.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Carousel</a></li>
<li class="nav-item"><a class="nav-link" href="base/collapse.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Collapse</a></li>
<li class="nav-item"><a class="nav-link" href="base/list-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> List group</a></li>
<li class="nav-item"><a class="nav-link" href="base/navs-tabs.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Navs & Tabs</a></li>
<li class="nav-item"><a class="nav-link" href="base/pagination.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Pagination</a></li>
<li class="nav-item"><a class="nav-link" href="base/placeholders.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Placeholders</a></li>
<li class="nav-item"><a class="nav-link" href="base/popovers.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Popovers</a></li>
<li class="nav-item"><a class="nav-link" href="base/progress.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Progress</a></li>
<li class="nav-item"><a class="nav-link" href="base/spinners.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Spinners</a></li>
<li class="nav-item"><a class="nav-link" href="base/tables.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Tables</a></li>
<li class="nav-item"><a class="nav-link" href="base/tooltips.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Tooltips</a></li>
</ul>
</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cursor"></use>
</svg> Buttons</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="buttons/buttons.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons</a></li>
<li class="nav-item"><a class="nav-link" href="buttons/button-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons Group</a></li>
<li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Dropdowns</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/components/loading-buttons/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Loading Buttons
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="charts.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie"></use>
</svg> Charts</a></li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-notes"></use>
</svg> Forms</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="forms/form-control.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Form Control</a></li>
<li class="nav-item"><a class="nav-link" href="forms/select.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Select</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/multi-select/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Multi Select
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="forms/checks-radios.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Checks and radios</a></li>
<li class="nav-item"><a class="nav-link" href="forms/range.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Range</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/range-slider/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Range Slider
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="forms/input-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Input group</a></li>
<li class="nav-item"><a class="nav-link" href="forms/floating-labels.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Floating labels</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/date-picker/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Date Picker
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/date-range-picker/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Date Range Picker<span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/rating/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Rating
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/time-picker/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Time Picker
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="forms/layout.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Layout</a></li>
<li class="nav-item"><a class="nav-link" href="forms/validation.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Validation</a></li>
</ul>
</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star"></use>
</svg> Icons</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="icons/coreui-icons-free.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> CoreUI Icons<span class="badge badge-sm bg-success ms-auto">Free</span></a></li>
<li class="nav-item"><a class="nav-link" href="icons/coreui-icons-brand.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> CoreUI Icons - Brand</a></li>
<li class="nav-item"><a class="nav-link" href="icons/coreui-icons-flag.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> CoreUI Icons - Flag</a></li>
</ul>
</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
</svg> Notifications</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="notifications/alerts.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Alerts</a></li>
<li class="nav-item"><a class="nav-link" href="notifications/badge.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Badge</a></li>
<li class="nav-item"><a class="nav-link" href="notifications/modals.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Modals</a></li>
<li class="nav-item"><a class="nav-link" href="notifications/toasts.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Toasts</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="widgets.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-calculator"></use>
</svg> Widgets<span class="badge badge-sm bg-info ms-auto">NEW</span></a></li>
<li class="nav-divider"></li>
<li class="nav-title">Extras</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star"></use>
</svg> Pages</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="login.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout"></use>
</svg> Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout"></use>
</svg> Register</a></li>
<li class="nav-item"><a class="nav-link" href="404.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug"></use>
</svg> Error 404</a></li>
<li class="nav-item"><a class="nav-link" href="500.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug"></use>
</svg> Error 500</a></li>
</ul>
</li>
<li class="nav-item mt-auto"><a class="nav-link" href="https://coreui.io/docs/templates/installation/" target="_blank">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-description"></use>
</svg> Docs</a></li>
<li class="nav-item"><a class="nav-link text-primary fw-semibold" href="https://coreui.io/product/bootstrap-dashboard-template/" target="_top">
<svg class="nav-icon text-primary">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-layers"></use>
</svg> Try CoreUI PRO</a></li>
</ul>
<div class="sidebar-footer border-top d-none d-md-flex">
<button class="sidebar-toggler" type="button" data-coreui-toggle="unfoldable"></button>
</div>
</div>
<div class="wrapper d-flex flex-column min-vh-100">
<header class="header header-sticky p-0 mb-4">
<div class="container-fluid border-bottom px-4">
<button class="header-toggler" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
</svg>
</button>
<ul class="header-nav d-none d-lg-flex">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
</ul>
<ul class="header-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
</svg></a></li>
<li class="nav-item"><a class="nav-link" href="#">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-list-rich"></use>
</svg></a></li>
<li class="nav-item"><a class="nav-link" href="#">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
</svg></a></li>
</ul>
<ul class="header-nav">
<li class="nav-item py-1">
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
</li>
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-2 d-flex align-items-center" type="button" aria-expanded="false" data-coreui-toggle="dropdown">
<svg class="icon icon-lg theme-icon-active">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast"></use>
</svg>
</button>
<ul class="dropdown-menu dropdown-menu-end" style="--cui-dropdown-min-width: 8rem;">
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-coreui-theme-value="light">
<svg class="icon icon-lg me-3">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-sun"></use>
</svg>Light
</button>
</li>
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-coreui-theme-value="dark">
<svg class="icon icon-lg me-3">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon"></use>
</svg>Dark
</button>
</li>
<li>
<button class="dropdown-item d-flex align-items-center active" type="button" data-coreui-theme-value="auto">
<svg class="icon icon-lg me-3">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast"></use>
</svg>Auto
</button>
</li>
</ul>
</li>
<li class="nav-item py-1">
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
</li>
<li class="nav-item dropdown"><a class="nav-link py-0 pe-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
<div class="dropdown-menu dropdown-menu-end pt-0">
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top mb-2">Account</div><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
</svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
</svg> Messages<span class="badge badge-sm bg-success ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-task"></use>
</svg> Tasks<span class="badge badge-sm bg-danger ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
</svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold my-2">
<div class="fw-semibold">Settings</div>
</div><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user"></use>
</svg> Profile</a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings"></use>
</svg> Settings</a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-credit-card"></use>
</svg> Payments<span class="badge badge-sm bg-secondary ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-file"></use>
</svg> Projects<span class="badge badge-sm bg-primary ms-2">42</span></a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lock-locked"></use>
</svg> Lock Account</a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout"></use>
</svg> Logout</a>
</div>
</li>
</ul>
</div>
<div class="container-fluid px-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb my-0">
<li class="breadcrumb-item"><a href="#">Home</a>
</li>
<li class="breadcrumb-item"><span>Components</span>
</li>
<li class="breadcrumb-item"><span>Forms</span>
</li>
<li class="breadcrumb-item active"><span>Checks & radios</span>
</li>
</ol>
</nav>
</div>
</header>
<div class="body flex-grow-1">
<div class="container-lg px-4">
<div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
<div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
<div class="col-xl-auto col-12 d-none d-xl-block p-0"><img class="img-fluid" src="assets/img/components.webp" width="160px" height="160px" alt="CoreUI PRO hexagon"></div>
<div class="col-md col-12 px-lg-4">
Our Admin Panel isn’t just a mix of third-party components. It’s <strong>the only open-source Bootstrap dashboard built on a professional, enterprise-grade UI Components Library</strong>.
This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
</div>
<div class="col-md-auto col-12 mt-3 mt-lg-0"><a class="btn btn-primary text-nowrap text-white" href="https://coreui.io/docs/forms/checks-radios/" target="_blank" rel="noopener noreferrer">Explore Documentation</a></div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Checkbox</strong></div>
<div class="card-body">
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1000" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#checks" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1000">
<div class="form-check">
<input class="form-check-input" id="flexCheckDefault" type="checkbox">
<label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexCheckChecked" type="checkbox" checked>
<label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Indeterminate</strong></div>
<div class="card-body">
<p class="text-body-secondary small">Checkboxes can utilize the <code>:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1001" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#indeterminate" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1001">
<div class="form-check form-example-indeterminate">
<input class="form-check-input" id="flexCheckIndeterminate" type="checkbox">
<label class="form-check-label" for="flexCheckIndeterminate">Indeterminate checkbox</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Checkbox</strong><span class="small ms-1">Disabled</span></div>
<div class="card-body">
<p class="text-body-secondary small">Add the <code>disabled</code> attribute and the associated <code><label></code>s are automatically styled to match with a lighter color to help indicate the input’s state.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1002" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#disabled" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1002">
<div class="form-check">
<input class="form-check-input" id="flexCheckDisabled" type="checkbox" disabled>
<label class="form-check-label" for="flexCheckDisabled">Disabled checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexCheckCheckedDisabled" type="checkbox" checked disabled>
<label class="form-check-label" for="flexCheckCheckedDisabled">Disabled checked checkbox</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Radios</strong></div>
<div class="card-body">
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1003" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#radios" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1003">
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault">
<label class="form-check-label" for="flexRadioDefault1">Default radio</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked>
<label class="form-check-label" for="flexRadioDefault2">Default checked radio</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Radios</strong><span class="small ms-1">Disabled</span></div>
<div class="card-body">
<p class="text-body-secondary small">Add the <code>disabled</code> attribute and the associated <code><label></code>s are automatically styled to match with a lighter color to help indicate the input’s state.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1004" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#disabled-1" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1004">
<div class="form-check">
<input class="form-check-input" id="flexRadioDisabled" type="radio" name="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">Disabled radio</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioCheckedDisabled" type="radio" name="flexRadioDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">Disabled checked radio</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Switches</strong></div>
<div class="card-body">
<p class="text-body-secondary small">A switch has the markup of a custom checkbox but uses the <code>.form-switch</code> class to render a toggle switch. Switches also support the <code>disabled</code> attribute.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1005" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#switches" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1005">
<div class="form-check form-switch">
<input class="form-check-input" id="flexSwitchCheckDefault" type="checkbox">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" id="flexSwitchCheckChecked" type="checkbox" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" id="flexSwitchCheckDisabled" type="checkbox" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" id="flexSwitchCheckCheckedDisabled" type="checkbox" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Switches</strong><span class="small ms-1">Sizes</span></div>
<div class="card-body">
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1006" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#sizes" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1006">
<div class="form-check form-switch">
<input class="form-check-input" id="flexSwitchCheckDefault" type="checkbox">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" id="flexSwitchCheckDefaultLg" type="checkbox">
<label class="form-check-label" for="flexSwitchCheckDefaultLg">Large switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" id="flexSwitchCheckDefaultXl" type="checkbox">
<label class="form-check-label" for="flexSwitchCheckDefaultXl">Extra large switch checkbox input</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Checks and Radios</strong><span class="small ms-1">Default layout (stacked)</span></div>
<div class="card-body">
<p class="text-body-secondary small">By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code>.form-check</code>.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1007" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#default-stacked" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1007">
<div class="form-check">
<input class="form-check-input" id="defaultCheck1" type="checkbox">
<label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" id="defaultCheck2" type="checkbox" disabled>
<label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
</div>
</div>
</div>
</div>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1008" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#default-stacked" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1008">
<div class="form-check">
<input class="form-check-input" id="exampleRadios1" type="radio" name="exampleRadios" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">Default radio</label>
</div>
<div class="form-check">
<input class="form-check-input" id="exampleRadios2" type="radio" name="exampleRadios" value="option2">
<label class="form-check-label" for="exampleRadios2">Second default radio</label>
</div>
<div class="form-check">
<input class="form-check-input" id="exampleRadios3" type="radio" name="exampleRadios" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">Disabled radio</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Checks and Radios</strong><span class="small ms-1">Inline</span></div>
<div class="card-body">
<p class="text-body-secondary small">Group checkboxes or radios on the same horizontal row by adding <code>.form-check-inline</code> to any <code>.form-check</code>.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1009" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#inline" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1009">
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineCheckbox1" type="checkbox" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineCheckbox2" type="checkbox" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineCheckbox3" type="checkbox" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1010" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#inline" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1010">
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Checks and Radios</strong><span class="small ms-1">Without labels</span></div>
<div class="card-body">
<p class="text-body-secondary small">Omit the wrapping <code>.form-check</code> for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using <code>aria-label</code>). See the <a href="https://coreui.io/docs/forms/overview/#accessibility">forms overview accessibility</a> section for details.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1011" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#without-labels" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1011">
<div>
<input class="form-check-input" id="checkboxNoLabel" type="checkbox" aria-label="...">
</div>
<div>
<input class="form-check-input" id="radioNoLabel1" type="radio" name="radioNoLabel" aria-label="...">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Toggle buttons</strong></div>
<div class="card-body">
<p class="text-body-secondary small">Create button-like checkboxes and radio buttons by using <code>.btn</code> styles rather than <code>.form-check-label</code> on the <code><label></code> elements. These toggle buttons can further be grouped in a <a href="https://coreui.io/docs/components/button-group/">button group</a> if needed.</p>
<h3 id="checkbox-toggle-buttons">Checkbox toggle buttons<a class="anchorjs-link" aria-label="Anchor" data-anchorjs-icon="#" href="#checkbox-toggle-buttons" style="padding-left: 0.375em;"></a></h3>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1012" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#toggle-buttons" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1012">
<input class="btn-check" id="btn-check" type="checkbox" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
</div>
</div>
</div>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1013" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#toggle-buttons" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1013">
<input class="btn-check" id="btn-check-2" type="checkbox" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
</div>
</div>
</div>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1014" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#toggle-buttons" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1014">
<input class="btn-check" id="btn-check-3" type="checkbox" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Toggle buttons</strong><span class="small ms-1">Radio</span></div>
<div class="card-body">
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1015" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#radio-toggle-buttons" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1015">
<input class="btn-check" id="option1" type="radio" name="options" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input class="btn-check" id="option2" type="radio" name="options" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>
<input class="btn-check" id="option3" type="radio" name="options" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>
<input class="btn-check" id="option4" type="radio" name="options" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>
</div>
</div>
</div>
<h3 id="outlined-styles">Outlined styles<a class="anchorjs-link" aria-label="Anchor" data-anchorjs-icon="#" href="#outlined-styles" style="padding-left: 0.375em;"></a></h3>
<p class="text-body-secondary small">Different variants of <code>.btn</code>, such at the various outlined styles, are supported.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1016" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/checks-radios/#radio-toggle-buttons" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1016">
<input class="btn-check" id="btn-check-outlined" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
<input class="btn-check" id="btn-check-2-outlined" type="checkbox" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
<input class="btn-check" id="success-outlined" type="radio" name="options-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
<input class="btn-check" id="danger-outlined" type="radio" name="options-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer px-4">
<div><a href="https://coreui.io">CoreUI </a><a href="https://coreui.io/product/free-bootstrap-admin-template/">Bootstrap Admin Template</a> © 2025 creativeLabs.</div>
<div class="ms-auto">Powered by <a href="https://coreui.io/docs/">CoreUI UI Components</a></div>
</footer>
</div>
<!-- CoreUI and necessary plugins-->
<script src="node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
<script src="node_modules/simplebar/dist/simplebar.min.js"></script>
<script>
const header = document.querySelector('header.header');
document.addEventListener('scroll', () => {
if (header) {
header.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0);
}
});
</script>
<script>
document.querySelectorAll('.form-example-indeterminate [type="checkbox"]').forEach(function (checkbox) {
checkbox.indeterminate = true
})
</script>
</body>
</html>
