# drgullin/icheck

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/drgullin-icheck).**

7,300 stars · 1,591 forks · CSS

## Links

- GitHub: https://github.com/drgullin/icheck
- Homepage: http://fronteed.com/iCheck
- awesome-repositories: https://awesome-repositories.com/repository/drgullin-icheck.md

## Description

iCheck is a custom form input library that replaces native checkboxes and radio buttons with customizable visual wrappers. It ensures a uniform visual experience across different browsers by masking native form elements and rendering custom HTML structures.

The project provides a common interface that functions across both jQuery and Zepto. It includes a dynamic styler that detects and applies custom styles to form elements added to a page after the initial load.

The library incorporates an accessibility layer that injects ARIA attributes and keyboard event listeners to ensure custom inputs remain navigable for screen readers. It also manages state synchronization between the custom visual wrappers and the hidden native input values.

## Tags

### User Interface & Experience

- [Form Input Components](https://awesome-repositories.com/f/user-interface-experience/form-input-components.md) — Provides custom form input components that replace native checkboxes and radio buttons with accessible, styled wrappers.
- [Accessible Form Controls](https://awesome-repositories.com/f/user-interface-experience/accessible-form-controls.md) — Provides custom-styled inputs that include keyboard support and ARIA attributes for screen reader accessibility.
- [Custom Checkbox and Radio Button Styling](https://awesome-repositories.com/f/user-interface-experience/checkbox-components/custom-checkbox-and-radio-button-styling.md) — Replaces default browser checkbox and radio button appearances with custom CSS styles for visual consistency. ([source](https://cdn.jsdelivr.net/gh/drgullin/icheck@1.0.3/README.md))
- [Form Element Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/html-element-wrappers/form-element-wrappers.md) — Uses custom HTML wrappers to mask native form elements for consistent cross-browser visual styling.
- [Input Synchronization](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/input-synchronization.md) — Synchronizes state between the custom visual wrapper and the original hidden native input field. ([source](https://cdn.jsdelivr.net/gh/drgullin/icheck@1.0.3/README.md))
- [Cross-Browser UI Components](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling-systems/cross-browser-event-managers/cross-browser-ui-components.md) — Ensures a uniform visual experience across all browsers by replacing native inputs with consistent custom components.
- [Input State Synchronization](https://awesome-repositories.com/f/user-interface-experience/input-state-synchronization.md) — Ensures the values of hidden native inputs are updated whenever the custom visual wrapper is interacted with.
- [WAI-ARIA Frameworks](https://awesome-repositories.com/f/user-interface-experience/wai-aria-frameworks.md) — Implements a system that automatically generates ARIA attributes and keyboard event handlers for custom input wrappers.
- [Input Style Re-initialization](https://awesome-repositories.com/f/user-interface-experience/dynamic-component-re-initializers/input-style-re-initialization.md) — Automatically detects and applies custom styling to form elements added to the page after the initial load.
- [Automatic Initializers](https://awesome-repositories.com/f/user-interface-experience/form-input-components/automatic-initializers.md) — Automatically detects and applies styles to new input elements upon page load or dynamic content updates. ([source](https://cdn.jsdelivr.net/gh/drgullin/icheck@1.0.3/README.md))

### Web Development

- [DOM Mutation Observation](https://awesome-repositories.com/f/web-development/dom-mutation-observation.md) — Monitors the document for structural changes to automatically apply custom styles to newly added input elements.
- [Dynamic Input Styling](https://awesome-repositories.com/f/web-development/dynamic-content-loading/dynamic-input-styling.md) — Automatically detects and applies custom styles to form elements added to the page via dynamic content updates.
- [jQuery-Compatible Libraries](https://awesome-repositories.com/f/web-development/jquery-compatible-libraries.md) — Provides a common interface allowing the library to function identically across both jQuery and Zepto.
- [jQuery Plugins](https://awesome-repositories.com/f/web-development/jquery-plugins.md) — Functions as a jQuery plugin to replace native checkboxes and radio buttons with customizable wrappers.
- [Zepto Plugins](https://awesome-repositories.com/f/web-development/zepto-plugins.md) — Provides a lightweight interface extension with themed form controls for projects using the Zepto library.