/svelte-checkbox

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

Primary LanguageSvelte

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