https://github.com/19h47/19h47-checkbox
☑️
https://github.com/19h47/19h47-checkbox
checkbox checkboxes html javascript
Last synced: about 2 months ago
JSON representation
☑️
- Host: GitHub
- URL: https://github.com/19h47/19h47-checkbox
- Owner: 19h47
- Created: 2019-04-01T22:32:39.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T00:00:45.000Z (about 1 year ago)
- Last Synced: 2024-04-14T06:07:25.540Z (about 1 year ago)
- Topics: checkbox, checkboxes, html, javascript
- Language: HTML
- Homepage: https://19h47.github.io/19h47-checkbox/
- Size: 2.02 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @19h47/checkbox
## Install
```
yarn add @19h47/checkbox
```
## HTML
```html
Do you want to click me?
```
## JavaScript
```javascript
import Checkbox from '@19h47/checkbox';
const $checkbox = document.querySelector('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);
checkbox.init();
```
## Keyboard Support
| Key | Function |
| ----- | ------------------------------------------------------ |
| Tab | Moves keyboard focus to the `checkbox`. |
| Space | Toggles checkbox between checked and unchecked states. |
## Role, Property, State, and Tabindex Attributes
| Role | Attribute | Element | Usage |
| ---------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | | `h3` | Provides a grouping label for the group of checkboxes. |
| `group` | | `div` | Identifies the div element as a group container for the checkboxes. |
| | `aria-labelledby` | `div` | The `aria-labelledby` attribute references the id attribute of the `h3` element to define the accessible name for the group of checkboxes. |
| `checkbox` | | `div` |
- Identifies the `div` element as a `checkbox`.
- The child text content of this div provides the accessible name of the checkbox.
| | `tabindex="0"` | `div` | Includes the checkbox in the page tab sequence. |
| | `aria-checked="false"` | `div` | Indicates the `checkbox` is **not** checked. |
| | `aria-checked="true"` | `div` | Indicates the `checkbox` is checked. |
## Methods
| Method | Description | Arguments |
| -------------- | ----------------------- | ---------------------------------------------------------------------------------- |
| `activate()` | Activate the checkbox | `trigger` (optional) Whether or not the event should be trigger. Default to `true` |
| `deactivate()` | Deactivate the checkbox | `trigger` (optional) Whether or not the event should be trigger. Default to `true` |
```javascript
import Checkbox from '@19h47/checkbox';
const $checkbox = document.querySelector('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);
checkbox.init();
checkbox.activate();
checkbox.deactivate();
```
## Event
### Activate
```javascript
import Checkbox from '@19h47/checkbox';
const $checkbox = document.querySelectorAll('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);
checkbox.init();
checkbox.$input.addEventListener('activate', event => {
const {
target: { value },
} = event;
console.log(value); // Current activate value
});
```
### Deactivate
```javascript
import Checkbox from '@19h47/checkbox';
const $checkbox = document.querySelectorAll('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);
checkbox.init();
checkbox.$input.addEventListener('deactivate', event => {
const {
target: { value },
} = event;
console.log(value); // Current deactivate value
});
```
## CheckboxGroup
The `CheckboxGroup` is a wrapper class around `Checkbox`.
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
```html
Curst
Doppelganger, Greater
Duhlarkin
```
```javascript
import { CheckboxGroup } from '@19h47/checkbox';
const $element = document.querySelector('[role="group"]');
const checkboxgroup = new CheckboxGroup($element);
checkbox.init();
```
## Example
An example is located right [here](https://19h47.github.io/19h47-checkbox/), see [sources](https://github.com/19h47/19h47-checkbox/blob/main/index.html).
## References
- [Checkbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)