Radio Group

Mutually exclusive options in visually rich cards

npm create webcore@latest add RadioGroup

Use the RadioGroup component to display mutually exclusive options as visually rich cards with radio buttons, icons, labels, and supporting text. They:

• Improve usability: Card-based options are easier to scan, compare, and select than standard radio buttons.
• Provide additional context: Icons and subtexts help explain each choice, leading to more informed decisions.

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

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

<RadioGroup
    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 radio group is changed, you can listen to the radioGroupOnChange event:

<script>
    import { listen } from 'webcoreui'

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

This will emit an object containing the name of the radio group and the value of the selected item. 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.

<RadioGroup
    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.

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

API

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