Checkbox

Yes/no input in a list of options where a user may select none, all, or some of the options. Or if a user needs to agree to something.

Beets

Carrots

Radishes

Potatoes

  
selected: Radishes,Potatoes

Prop	Type	Description
label	`string`	Required Input label
name	`string`	Input name attribute
id	`string`	HTML id attribute
bind:group	`any`	Two-way binding for the state
value	`any`	The value for this input

Key	Action
`Space`	Check / uncheck focused checkbox

<script lang="ts">
import Checkbox from '../components/checkbox.svelte';
import Fieldset from '../components/fieldset.svelte';

let group = ['Radishes', 'Potatoes'];
let name = 'veg';
</script>

<Fieldset>
  <Checkbox {name} label="Beets" bind:group value="Beets" />
  <Checkbox {name} label="Carrots" bind:group value="Carrots" />
  <Checkbox {name} label="Radishes" bind:group value="Radishes" />
  <Checkbox {name} label="Potatoes" bind:group value="Potatoes" />
</Fieldset>

<pre>
  <code>
selected: {group}
  </code>
</pre>