Version:

Install ​

shell
npm i @vaadin/radio-group
npm i @vaadin/checkbox
npm i @vaadin/checkbox-group

Import ​

javascript
import  '@vaadin/radio-group';
import  '@vaadin/checkbox';
import  '@vaadin/checkbox-group';

Variants ​

Single Selection ​

html
<vaadin-radio-group theme="segmented">
    <vaadin-radio-button label="Alle (746)" value="1"></vaadin-radio-button>
    <vaadin-radio-button value="2">
        <label slot="label" style="display: flex; align-items: center; gap: 0.5rem;">
            <span theme="icon error">error_outline</span>
            <span>Fehler</span>
        </label>
    </vaadin-radio-button>
    <vaadin-radio-button label="Item 4" value="3">
        <label slot="label" style="display: flex; align-items: center; gap: 0.5rem;">
            <span>Ausgewählte</span>
            <span theme="icon">info</span>
        </label>
    </vaadin-radio-button>
    <vaadin-radio-button label="Abgeschlossene (6)" value="4"></vaadin-radio-button>
</vaadin-radio-group>

Multi Selection ​

html
<vaadin-checkbox-group theme="segmented">
    <vaadin-checkbox label="Alle (746)" value="1"></vaadin-checkbox>
    <vaadin-checkbox value="2">
        <label slot="label" style="display: flex; align-items: center; gap: 0.5rem;">
            <span theme="icon error">error_outline</span>
            <span>Fehler</span>
        </label>
    </vaadin-checkbox>
    <vaadin-checkbox value="3">
        <label slot="label" style="display: flex; align-items: center; gap: 0.5rem;">
            <span>Ausgewählte</span>
            <span theme="icon">info</span>
        </label>
    </vaadin-checkbox>
    <vaadin-checkbox label="Abgeschlossene (6)" value="4"></vaadin-checkbox>
</vaadin-checkbox-group>