# Svelte Checkbox - Flowbite The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants. ## Setup ```svelte ``` ## Checkbox examples Use this default example of a checbkox element in a checked, unchecked and indeterminate state. ```svelte Default checkbox Checked state Indeterminate state ``` ## Disabled state This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element. ```svelte Disabled checkbox Disabled checked Disabled indeterminate ``` ## Alternative syntax If you need separate control over the label and the checkbox you can use the verbose syntax, but then you need to take care about aligning manually. ```svelte Left column Right column
``` ## Checkbox with a link Use this example if you want to add an anchor link inside the label of the checkbox component. ```svelte I agree with the terms and conditions . ``` ## Helper text Get started with this example if you want to add a secondary helper text for the checkbox component. ```svelte Free shipping via Flowbite For orders shipped from $25 in books or $29 in other categories ``` ## Bordered Use this example of a checkbox inside a card element to enable a larger area of clicking activation. ```svelte
Default radio
Checked state
``` ## Checkbox list group Use this example to show a list of checkbox items grouped inside a card. ```svelte

Technology

  • svelte
  • Vue JS
  • React
  • Angular
    •  ``` You can use the internal loop to render a list of `CheckboxItem`s. ```svelte

    Choices: {group.join(", ")}

    ``` ## Horizontal list group Use this example to show a list of checkbox items inside a card horizontally. ```svelte

    Identification

    ``` ## Checkbox dropdown Use this example to show a list of checkbox items inside a dropdown menu. ```svelte
    Robert Gouth Jese Leos Bonnie Green Jese Leos Robert Gouth Bonnie Green Delete user     ``` ## Inline layout You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class. ```svelte
    Inline 1 Inline 2 Inline checked Inline disabled
    ``` You can use the property `inline` as the alternative. ```svelte Inline 1 Inline 2 Inline checked Inline disabled ``` ## Colors ```svelte
    Red Green Purple Teal Yellow Orange
    ``` ## CheckboxButton The special case component - `CheckboxButton` - is the `Checkbox` with the [Button](/docs/components/buttons) look and feel. It can be used as standalone element or be wrapped inside [ButtonGroup](/docs/components/button-group). This component accepts all props from the [Button](/docs/components/buttons) for styling and `Checkbox` for behaviour. ```svelte
    Apple Facebook Discord Dropbox
    Apple Facebook Discord Dropbox ``` ## Advanced layout Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked. ```svelte

    Choose technology:

    React Js
    A JavaScript library for building user interfaces.
    Vue Js
    Vue.js is an model–view front end JavaScript framework.
    Angular
    A TypeScript-based web application framework.
    ``` ## Group variable ```svelte
    Group: {group}
    ``` ## Component data ### Checkbox #### Types [CheckboxProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L780) #### Props - children - color: "primary" - custom - inline - tinted - rounded - group: $bindable([]) - choices: [] - checked: $bindable(false) - classes - class: className - divClass - disabled - value - labelProps: { ## References - [Flowbite Checkbox](https://flowbite.com/docs/forms/checkbox/)