Skip to main content
SimilarExport ZIP
100%

Simple custom CheckBox component for Vue.js, compatible with v-model.

✓ Published0🌍 Public
KKopylovVitalik
Last edited Nov 23, 2019
Created on Apr 7, 2021

This example demonstrates a custom CheckBox component for Vue.js that integrates seamlessly with `v-model` for both single-value and array-based (multi-select) bindings. The component uses Vue’s `model` option, `props` like `value`, `modelValue`, `trueValue`, and `falseValue`, and emits a `change` event to update the bound data. It renders a stylized checkbox with hidden native input, custom `checkmark` styling via scoped PostCSS, and supports hover and checked states with a green accent color. The code shows array handling through `includes`, `push`, and `splice` methods.

AI-generated description

Similar vizzes

Loading thumbnail…

Test

This example demonstrates a reusable D3 checkbox component that can be configured with custom sizes, positions, colors, and checked states. Three checkboxes are rendered on an SVG canvas, and clicking them updates a text label to display their boolean statuses. The implementation defines a `d3CheckBox` factory function that builds interactive SVG elements with rectangular boxes and path-based check marks, using D3 version 3’s `d3.svg.line()` for the mark geometry. A click event toggles opacity and triggers a callback showing how the component supports custom interaction logic.

PPhilip Rago
63% match
Loading thumbnail…

Check / Uncheck Checkbox multiple times ! PROP

This example demonstrates a form control that reflects whether an ID appears in a preselected list, toggling a checkbox’s checked state each time the user interacts with it. The code parses a JSON-encoded array of duplicate IDs from the server-side model, then uses `jQuery.inArray` to test membership and sets the `prop('checked', true/false)` accordingly. The behavior is driven entirely by the `#isDuplicate` checkbox, whose state updates based on the presence of the selected ID in the provided data. No animation or complex rendering is involved; the visualization relies on jQuery’s attribute manipulation and the browser’s native checkbox handling.

IIliaIdakiev
55% match
Loading thumbnail…

TestBug

This example demonstrates an interactive select dropdown component built with Ember.js. The component, defined in `components.select-dropdown.js`, maintains a bound `value` property and synchronizes it with the selected `<option>` element using observers and the `didRender` lifecycle hook. It supports plain string arrays or objects with `value` and `label` keys, with an optional empty default option. The application controller supplies a static `dropdownOptions` list, and the template renders the dropdown with a bound selection. The code relies on Ember’s component lifecycle methods (`didReceiveAttrs`, `didInsertElement`, `didRender`) and the `change` event handler to propagate user selections back to the controller.

FFrozenfire92
54% match
Loading thumbnail…

D3.js Graph with Checkbox (Dynamic)

This example shows a dynamic multi-line chart where each line corresponds to a data column, toggled on and off via checkboxes. Using D3.js v6, it renders SVG paths for three series (`rt1`, `rt2`, `rt3`) against a linear mass scale, with a color scale based on `d3.schemeCategory10`. The checkboxes are generated from the data keys, and the `on("change")` handler updates line visibility by toggling the `display` attribute. The data is hardcoded in the script.

Ffofana1984
53% match
Loading thumbnail…

Extending HTMLElement as Select

Four chained selection panels demonstrate a custom element hierarchy built by extending HTMLElement. The example defines `vc-select`, `vc-selectcheckbox`, `vc-xselect`, and `vc-xxselect` classes, which are registered via `customElements.define`. Each `vc-select` supports dynamic option management, state saving/restoring, and dependency-based filtering through `vc-options` and `vc-dependencies` attributes. A checkbox toggles visual state, and selection changes propagate up the element chain to toggle borders, showing event-driven composite behavior.

WWillimnot
52% match
Loading thumbnail…

Splash animation with checkboxes

This example demonstrates a playful splash animation triggered by user interaction. A checkbox input, hidden via CSS, controls a series of animations when checked. The code uses HTML checkboxes, CSS transitions, and keyframe animations to create a mustard bottle that shakes and a paint splatter image that scales and fades over eight seconds. The splatter image is loaded from an external URL and rendered with a mix-blend-mode overlay effect, while the label element acts as a clickable toggle.

SStefan Gerrits
52% match
Loading thumbnail…

React Starter

This example demonstrates a simple password visibility toggle in a React form. It shows how a checkbox toggles an input field between “password” and “text” types using the `useState` hook and the component-level `showPwd` state. The React 16.13.1 UMD builds are loaded from unpkg, with the app rendered via `ReactDOM.render` into a root div, and the toggle logic handled by the checkbox’s `onClick` event calling `setShowPwd`.

Vvvs1680
52% match
Loading thumbnail…

One unfilled rectangle

This example demonstrates how D3.js can manipulate existing DOM elements and their properties. It starts with a simple HTML div containing a checkbox, then uses D3 selections to change the div’s border style to a dark gray dashed pattern and reassigns its ID attribute. The checkbox’s checked property is also set to true via D3’s property method. The visualization highlights D3’s ability to integrate with static HTML and dynamically update both CSS styles and element attributes, using the d3.v4 library directly in the browser without any external data sources or complex rendering.

IIgathi
50% match