Checkbox Group

Basic usage

Checked values: 
<script lang="ts">
  let checkedValues: any = []
  const options = [
    { label: 'Apple', value: 1 },
    { label: 'Banana', value: 2 },
    { label: 'Orange', value: 3 },
    { label: 'Peach', value: 4 },
  ]
</script>

<div text-xl>
  <b>Checked values:</b>
  {checkedValues}
</div>

<CCheckboxGroup {options} bind:value={checkedValues} />
<script lang="ts">
  let checkedValues: any = []
  const options = [
    { label: 'Apple', value: 1 },
    { label: 'Banana', value: 2 },
    { label: 'Orange', value: 3 },
    { label: 'Peach', value: 4 },
  ]
</script>

<div text-xl>
  <b>Checked values:</b>
  {checkedValues}
</div>

<CCheckboxGroup {options} bind:value={checkedValues} />
svelte
Click fold/expand code

CCheckboxGroup Props

  • value
    any[]
    default: undefined

    Checkbox group current value. It is recommended to use bind:value.

  • options
    Array<{ label: string; value: any; [k: string]: any }>
    default: undefined

    The options array.

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of every item.

  • gutterSize
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of every item.

CCheckboxGroup Events

No data

CCheckboxGroup Slots

No data

CCheckboxGroup Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 04:44:07