Checkbox

Checkbox

The single checkbox is best used in a Table. If you're making a Form with some options for a user to select from, use the CheckboxGroup component.



Props


value boolean
If the checkbox is checked or not.

onchange function
You can add a function when the value of the checkbox changes.

Checkbox Demo
<script>
  import { Checkbox } from "bubbles-ui";
</script>

<Checkbox
  value={true}
  onchange={() => {
    alert("Value Changed");
  }}
/>

LabeledCheckbox

This is usually a component you would want to include inside a form if you wanted the user to agree to something like terms and conditions. The labeled checkbox includes a label, description field, and validation.



Props


id string
If you're using this inside of the form, you'll want to include the id value, which will be the property value in JSON data when the form is submitted.

value boolean
If the component is checked or not.

label string
The label you want explaining what the checkbox is.

desc string
The option to add more text to explain the option the user is selecting in more detail. This element allows you to include html elements, so you can add an outbound link with an anchor tag.

error string An error occurred
The error text you want to show if this item fails validation.

validation string
The validation string you want to use for this form. See validateInputs for more information.

form_indent boolean true
Causes the elements to have spacing on the left and right to align it better with other elements in a form.

background boolean true
Toggle a gray background around the element. This makes the element look in a form with other text and select input.

Demo

Terms of Service

You can view more details about our terms of service and privacy policy at this link.

<script>
  import { LabeledCheckbox } from "bubbles-ui";

  const props = {
    id: "tos",
    value: null,
    label: "Terms of Service",
    desc: `You can view more details about our terms of service and privacy policy <a href="https://google.com">at this link</a>.`,
    error: "You have not accepted the terms of service.",
    validation: "required|boolean",
    background: false,
  };
</script>

<LabeledCheckbox {...props} />

CheckboxGroup

This is a component to include in a form when you want to user to select one or more options. If you want the user to only select one option, look into a RadioGroup instead.



Props


id string
If you're using this inside of the form, you'll want to include the id value, which will be the property value in JSON data when the form is submitted.

options array<Object>
An array that will contain the options the user can select.

Show Details
option[].label string
The text the user sees for the option
option[].value string
The value will be added to the array of values bound to the whole input.

value boolean
If the component is checked or not.

label string
The label you want explaining what the checkbox is.

desc string
The option to add more text to explain the option the user is selecting in more detail. This element allows you to include html elements, so you can add an outbound link with an anchor tag.

error string An error occurred
The error text you want to show if this item fails validation.

validation string
The validation string you want to use for this form. See validateInputs for more information.

form_indent boolean true
Causes the elements to have spacing on the left and right to align it better with other elements in a form.

background boolean true
Toggle a gray background around the element. This makes the element look in a form with other text and select input.

Demo

Select Toppings

You may select as many toppings as you would like.

 
<script>
  import Card from "$lib/components/card/Card.svelte";
  import CardHeader from "$lib/components/card/CardHeader.svelte";
  import CheckboxGroup from "$lib/components/checkbox/CheckboxGroup.svelte";

  const checkboxGroup = {
    id: "toppings",
    options: [
      {
        label: "Pepperoni",
        value: "pepperoni",
      },
      {
        label: "Cheddar Cheese",
        value: "cheese",
      },
      {
        label: "Small Mushrooms",
        value: "mushrooms",
      },
    ],
    value: ["pepperoni"],
    label: "Select Toppings",
    desc: `You may select as many toppings as you would like.`,
    error: "Something went wrong",
    validation: "array", //The data will be an array
  };
</script>

<Card height100={true}>
  <CardHeader title="Demo" border={false} />
  <CheckboxGroup {...checkboxGroup} />
</Card>