Skip to content
A checkbox component for Svelte (Cool animation, Customizable).
HTML JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
playground add playground script Jan 1, 2020
.gitignore add playground Jan 1, 2020
Checkbox.svelte init package Jan 1, 2020
README.md init package Jan 1, 2020
package.json add playground script Jan 1, 2020
rollup.config.js init package Jan 1, 2020
utils.js init package Jan 1, 2020

README.md

svelte-checkbox

A checkbox component for Svelte (Cool animation, Customizable).

☑️ Demo

demo

Installation

yarn add svelte-checkbox

Usage

<script>
  import Checkbox from "svelte-checkbox";

  let checked = false;
</script>

<Checkbox bind:checked></Checkbox>

Props

Prop Type Default Description
size String 3rem Component width & height
name String - Input name
id String - Component id
class String - Component class
primaryColor String #242432 Primary color
secondaryColor String #d8d8ea Secondary color
checked Boolean false Checked input

Events

Event Name Callback Description
change (event) => event.detail fires when checked/unchecked

<script>
  import Checkbox from "svelte-checkbox";

  function handleChange({ detail }) {
    console.log("checked", detail);
  }
</script>

<Checkbox on:change="{handleChange}" />

Full Usage

<script>
  import Checkbox from "svelte-checkbox";

  let checked = false;
</script>

<style>
  :global(.main__checkbox) {
    margin: 0.5rem;
  }
</style>

<Checkbox
  class="main__checkbox"
  size="5rem"
  bind:checked
  name="inputName"
  secondaryColor="rgba(1, 50, 67,0.2)"
  primaryColor="rgb(77, 5, 232)"
/>

Join Our Telegram Community

You can’t perform that action at this time.