fingerpich / svelte-checkbox

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

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