svelte-checkbox

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

☑️ 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