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/[email protected]/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!