# 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>
```