Checkbox Group

Multiple select options in visually rich cards

npm create webcore@latest add CheckboxGroup

Use the CheckboxGroup component to present multiple selectable options as visually rich cards with icons, labels, and supporting text. They:

• Improve usability: Large, card-based options are easier to scan and interact with than plain checkboxes.
• Provide additional context: Icons and subtexts help users understand each option before making a selection.

---
import { info } from 'webcoreui/icons'

const items = [
    {
        icon: info,
        label: 'Updates',
        subText: 'Get notified about updates',
        value: 'info',
        checked: true
    }, { ... }, { ... }
]
---

<CheckboxGroup
    items={items}
    name="preview"
/>

The component must have the following props:

• items: Sets an array of items to display. Each item must have at least a label and a value property. You can also optionally set icons, a subText, or control its default state using the checked and disabled properties.
• name: Sets the name of the input group. Must be unique within a page.

Listening to Events

To trigger actions when a checkbox group is changed, you can listen to the checkboxGroupOnChange event:

<script>
    import { listen } from 'webcoreui'

    listen('checkboxGroupOnChange', event => {
        console.log(event)
    })
</script>

This will emit an object containing the name of the checkbox group and the value of the checked items. Using Svelte/React variants, you can use the onChange prop instead.

Number of Columns

By default, the component uses a 1 column layout. You can set the number of columns using the columns prop.

<CheckboxGroup
    items={items}
    name="columns"
    columns={2}
/>

Card Styles

The component uses the Card component under the hood. This means you can tweak the appearance using card-specific props, such as secondary, compact, or flat.

<CheckboxGroup
    items={items}
    name="columns"
    columns={2}
    flat={false}
    secondary={false}
/>

API

type CheckboxGroupProps = {
    items: {
        icon?: string
        label: string
        subText?: string
        value: string
        checked?: boolean
        disabled?: boolean
    }[]
    name: string
    columns?: 1 | 2 | 3 | 4
    className?: string
} & CardProps