Get started with prettyCheckable CDN

MIT licensed

PrettyCheckable is a Flutter library that provides customizable, visually appealing checkboxes and radios.

Tags:
  • checkbox
  • radio
  • image

Stable version

Copied!

How to start using prettyCheckable CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with prettyCheckable CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prettycheckable@2.1.2/lib/css/pretty-checkable.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
  <script src="https://cdn.cdnhub.io/prettyCheckable/2.1.2/prettyCheckable.min.js"></script>
</head>
<body>
  <div class="container">
    <label for="example-1">Example 1:</label>
    <input id="example-1" type="checkbox" class="p-checkable" value="example-1">
    <span class="p-checkmark"></span>
  </div>

  <div class="container">
    <label for="example-2">Example 2:</label>
    <input id="example-2" type="checkbox" class="p-checkable" value="example-2" checked>
    <span class="p-checkmark"></span>
  </div>

  <div class="container">
    <label for="example-3">Example 3:</label>
    <input id="example-3" type="checkbox" class="p-checkable" value="example-3" disabled>
    <span class="p-checkmark"></span>
  </div>

  <div class="container">
    <label for="example-4">Example 4:</label>
    <input id="example-4" type="checkbox" class="p-checkable" value="example-4">
    <span class="p-checkmark">
      <i class="p-checkmark__icon p-checkmark__icon--check"></i>
      <i class="p-checkmark__icon p-checkmark__icon--uncheck"></i>
    </span>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      flatpickr('input[type="date"]');
      const checkables = document.querySelectorAll('.p-checkable');
      prettyCheckable.init(checkables);
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions