Pick a component

Checkbox

Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will trigger an event. They are bind with a checked property.

<script lang="ts">let checked = false;
</script>

<Checkbox on:nnsChange={() => (checked = !checked)} />

Properties

Property Description Type Default
inputId An id for the HTML element input that is rendered. string
checked The checkbox property of the checbox. boolean
preventDefault Prevent default action on click event. boolean false
disabled Enable or disable the checkbox. disabled true
text Display the label as a block or line of text. block or inline inline

Events

Event Description Detail
nnsChange Triggered when the state of the checkbox changes. No detail

Showcase