Checkbox

A checkbox is a form element that allows the user to select one or more options from a range of options. All properties are sent directly to the underlying HTML <input type="checkbox"> element. The default events are forwarded from the input element.

Examples

Basic Checkbox

<Checkbox />

with a Label

<Checkbox bind:checked={checked}>
    The checkbox is {checked ? 'checked' : 'unchecked'}
</CodeBlock>

with FormControl and InputGroup

Here is an example of a checkbox with a FormControl component. We also use the <InputGroup> element to group the checkboxes together with a fine gap between them.

<FormControl>
<Label>Receive Emails</Label>
    <Caption>Select when to receive emails</Caption>
    <InputGroup>
        <Checkbox
            value="replies"
            bind:group={emails}
        >on replies</Checkbox>
        <Checkbox
            value="mentions"
            bind:group={emails}
        >on mentions</Checkbox>
    </InputGroup>
</FormControl>

Disabled Checkbox

<Checkbox disabled />