bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

How to check if a switch or checkbox input is active/checked? #424

Closed AshtonSnapp closed 2 years ago

AshtonSnapp commented 2 years ago

Hello. I have a form I'm making and I want to only show certain inputs if a switch is active. So I have a variable and I've used bind:this to bind this switch input to the variable, but I'm not entirely sure how to check if the switch is active. Is there even a way to do this?

bestguy commented 2 years ago

Hi @AshtonSnapp yes the svelte way of doing this is to bind to the prop you need to watch. In this case it's the checked prop:

<script>
  import { Collapse, Input, Styles } from 'sveltestrap';
  let open = false;
</script>

<Styles />

<Input type="switch" bind:checked={open} />

<Collapse isOpen={open} class="border">
  <h1 class="m-3">Hello World!</h1>
</Collapse>

https://svelte.dev/repl/aed8c0196f0d445bb9b93fbf4186cb10?version=3.46.2

lmk if not clear.