# toggle-group — Examples

## icon group

```html
<toggle-group-ui value="bold">
  <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
  <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
  <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
</toggle-group-ui>
```

## text group

```html
<toggle-group-ui value="week">
  <toggle-option-ui value="day" text="Day"></toggle-option-ui>
  <toggle-option-ui value="week" text="Week"></toggle-option-ui>
  <toggle-option-ui value="month" text="Month"></toggle-option-ui>
  <toggle-option-ui value="year" text="Year"></toggle-option-ui>
</toggle-group-ui>
```

## single select

```html
<toggle-group-ui value="left" single>
  <toggle-option-ui value="left" icon="text-align-left"></toggle-option-ui>
  <toggle-option-ui value="center" icon="text-align-center"></toggle-option-ui>
  <toggle-option-ui value="right" icon="text-align-right"></toggle-option-ui>
  <toggle-option-ui value="justify" icon="text-align-justify"></toggle-option-ui>
</toggle-group-ui>
```
