Checkbox

Import the component in the script section of your Svelte file:

import Checkbox from 'svve11/Checkbox.svelte'
            

Creating a Checkbox

To supply the checkbox with its contents, an options object is passed as a prop to the checkbox. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 7 properties.

Required Props

• id (string): sets the id attribute of the checkbox component.
• checkBoxLabel (string): sets the aria-label attribute of the checkbox component.

Optional Props

• checked (boolean): sets the initial state of the checkbox, where true will render a pre-checked box and false will render a non-checked checkbox.
• checkBoxStyle (string): sets the styling for the checkbox
• checkBoxLabelStyle (string): sets the styling for the checkbox label text.
• name (string): sets the group name to which the checkbox belongs. All checkbox in one group should have the same name attribute.
• value (string): sets the value associated with the given checkbox.

Example Options Object:

const checkboxOptions = {
  checkBoxLabel: 'checkbox number one',
  id: 'checkbox-1',
  checked: false,
  checkBoxStyle: 'height: 1.5em; width: 1.5em; vertical-align: middle;',
  checkBoxLabelStyle: 'font-size:1em; vertical-align: middle;'
};
              

Instantiating a checkbox

<Checkbox options={checkboxOptions}/>
	  

Example Checkbox: