Checkboxes

Basic Usage

Checkboxes create multiple checkboxes that are wrapped in a <fieldset>. You can give the group an optional label with legend.

<script>
  import { Checkboxes } from '@splendidlabz/svelte'
</script>

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    { name: 'apple', label: '🍎 Apple' },
    { name: 'banana', label: '🍌 Banana' },
    { name: 'carrot', label: '🥕 Carrot' },
  ]}
/>

<fieldset>
  <legend>Your choice of fruits:</legend>
  <div>
    <!-- Checkbox 1 -->
    <!-- Checkbox 2 -->
    <!-- Checkbox 3 -->
  </div>
</fieldset>

Name and label

Like Checkbox, label is optional. If you don’t provide a label, Checkboxes will create a labels for each checkboxes by converting name to Title Case.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    { name: 'apple' },
    { name: 'banana' },
    { name: 'carrot' },
  ]}
/>

For convenience, you can also pass an array of strings to checkboxes. In this case, each value will be set as the name of the checkbox.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[ 'apple', 'banana', 'carrot' ]}
/>

Checked

If you want everything to be checked, set checked on the Checkboxes component.

<Checkboxes
  legend="Your choice of fruits:"
  checked
  checkboxes={[ 'apple', 'banana', 'carrot' ]}
/>

If you want a single checkbox to be checked, set checked:true on that checkbox instead.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    { name: 'apple', checked: true },
    { name: 'banana' },
    { name: 'carrot' },
  ]}
/>

Disabled

If you want all checkboxes to be disabled, use the disabled property on Checkboxes. Disabled checkboxes will not send data when submitted (even if the checkbox is checked).

<Checkboxes
  legend="Your choice of fruits:"
  disabled
  checkboxes={[ 'apple', 'banana', 'carrot' ]}
/>

If you want to disable a single checkbox, add the disabled property to that checkbox instead.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    { name: 'apple', disabled: true },
    'banana',
    'carrot'
  ]}
/>

Readonly

If you want all checkboxes to be read-only, use the readonly property on Checkboxes. Use this over disabled if you want to send the checkbox state and value on form submission.

• Value will be off when unchecked and on when checked.
• If value is provided, value will be the provided value when checked.

<Checkboxes
  legend="Your choice of fruits:"
  readonly
  checked
  checkboxes={[ 'apple', 'banana', 'carrot' ]}
/>

If you want to make a single checkbox read-only, add the readonly property to that checkbox instead.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    { name: 'apple', readonly: true, checked: true },
    'banana',
    'carrot',
  ]}
/>

Always send

You can make checkboxes always send their values (even when unchecked) on form submission by setting alwaysSend.

This creates an additional input for every checkbox (like readonly) without disabling them.

<Checkboxes
  legend="Your choice of fruits:"
  readonly
  alwaysSend
  checkboxes={[ 'apple', 'banana', 'carrot' ]}
/>

If you want to make a single checkbox read-only, add the alwaysSend property to that checkbox instead.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    { name: 'apple', readonly: true, alwaysSend: true },
    'banana',
    'carrot',
  ]}
/>

Additional input field

You can add a TextInput that shows up when a checked is checked by setting the hasInput property.

Regardless whether this checkbox is checked, it will send TextInput’s value (which defaults to an empty string) to the server when the form is submitted.

<Checkboxes
  legend="Your choice of fruits:"
  checkboxes={[
    'apple',
    'banana',
    'carrot',
    { name: 'others', hasInput: true },
  ]}
/>

Other properties

All other properties for each checkboxes item will be passed into their respective Checkbox component.

Bindings and Event

Element Binding

You can get the <fieldset> element with the ref property.

<script>
  let ref = null
</script>

<Checkboxes ... bind:ref />

Checked State Bindings

You can know the state of the checkboxes by binding to the checkboxes.

<script>
  let checkboxes = [ 'apple', 'banana', 'carrot' ]
</script>

<Checkboxes
  legend="Your choice of fruits:"
  bind:checkboxes
/>

{
  data: [
    {
      0: "a",
      1: "p",
      2: "p",
      3: "l",
      4: "e"
    },
    {
      0: "b",
      1: "a",
      2: "n",
      3: "a",
      4: "n",
      5: "a"
    },
    {
      0: "c",
      1: "a",
      2: "r",
      3: "r",
      4: "o",
      5: "t"
    }
  ]
}

Events

Only the change event is supported on Checkboxes right now. You can listen to the event like this:

<script>
  function change(event) {
    // Do something ...
  }
</script>

<Checkboxes ... on:change={change} />

Basic Styles

You can import the basic styles for Checkboxes through Splendid Styles.

@use '@splendidlabz/styles';

@import '@splendidlabz/styles/css';

Only necessary styles

If you wish to include only the necessary styles in your project, you can import the following files:

@use '@splendidlabz/styles/Forms/FormBase';
@use '@splendidlabz/styles/Forms/FormControls';

@import '@splendidlabz/styles/css/Forms/FormBase';
@import '@splendidlabz/styles/css/Forms/FormControls';

HTML Output

Checkboxes produces the following HTML:

<fieldset class="Fieldset">
  <legend class="Legend">Legend</legend>
  <div class="Checkboxes">
    <!-- Checkbox 1 -->
    <!-- Checkbox 2 -->
    <!-- Checkbox 3 -->
    <!-- ... -->
  </div>
</fieldset>

Please see Checkbox for the HTML produced by each Checkbox.

Properties and classes

The following classes are used by Checkboxes:

The following properties can be used to add classes to Checkboxes.

Properties

Use these properties to customize Checkboxes.