Toggle Group

A set of two-state buttons that can be either on or off.
betaView sourceReka UI
vue
<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import { ToggleGroupRoot, ToggleGroupItem } from '@typlog/ui'

const selected = ref<string>('left')
</script>

<template>
  <div class="flex items-center gap-2">
    <ToggleGroupRoot v-model="selected">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>
  </div>
</template>

API Reference ​

ToggleGroupRoot ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the Theme.

highContrast
–
boolean

Uses a higher contrast color for the component.

radius
–
"none""small""medium""large""full"

Overrides the radius inherited from the theme.

size"2"
"1""2""3"

Control the size of the toggle.

variant"solid"
Enum

The visual variant to apply.

ToogleGroupItem ​

Examples ​

Size ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import { ToggleGroupRoot, ToggleGroupItem } from '@typlog/ui'

const selected = ref<string>('left')
</script>

<template>
  <div class="flex items-center gap-2">
    <ToggleGroupRoot v-model="selected" size="1">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>
    <ToggleGroupRoot v-model="selected" size="2">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>
    <ToggleGroupRoot v-model="selected" size="3">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>
  </div>
</template>

Variant ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import { ToggleGroupRoot, ToggleGroupItem } from '@typlog/ui'

const selected = ref<string>('blog')
</script>

<template>
  <div class="flex items-podcast gap-2">
    <ToggleGroupRoot v-model="selected" variant="solid">
      <ToggleGroupItem value="blog">
        <Icon icon="lucide:file-text" />
      </ToggleGroupItem>
      <ToggleGroupItem value="podcast">
        <Icon icon="lucide:podcast" />
      </ToggleGroupItem>
      <ToggleGroupItem value="photo">
        <Icon icon="lucide:file-image" />
      </ToggleGroupItem>
    </ToggleGroupRoot>

    <ToggleGroupRoot v-model="selected" variant="surface">
      <ToggleGroupItem value="blog">
        <Icon icon="lucide:file-text" />
      </ToggleGroupItem>
      <ToggleGroupItem value="podcast">
        <Icon icon="lucide:podcast" />
      </ToggleGroupItem>
      <ToggleGroupItem value="photo">
        <Icon icon="lucide:file-image" />
      </ToggleGroupItem>
    </ToggleGroupRoot>

    <ToggleGroupRoot v-model="selected" variant="soft">
      <ToggleGroupItem value="blog">
        <Icon icon="lucide:file-text" />
      </ToggleGroupItem>
      <ToggleGroupItem value="podcast">
        <Icon icon="lucide:podcast" />
      </ToggleGroupItem>
      <ToggleGroupItem value="photo">
        <Icon icon="lucide:file-image" />
      </ToggleGroupItem>
    </ToggleGroupRoot>

    <ToggleGroupRoot v-model="selected" variant="outline">
      <ToggleGroupItem value="blog">
        <Icon icon="lucide:file-text" />
      </ToggleGroupItem>
      <ToggleGroupItem value="podcast">
        <Icon icon="lucide:podcast" />
      </ToggleGroupItem>
      <ToggleGroupItem value="photo">
        <Icon icon="lucide:file-image" />
      </ToggleGroupItem>
    </ToggleGroupRoot>

    <ToggleGroupRoot v-model="selected" variant="ghost">
      <ToggleGroupItem value="blog">
        <Icon icon="lucide:file-text" />
      </ToggleGroupItem>
      <ToggleGroupItem value="podcast">
        <Icon icon="lucide:podcast" />
      </ToggleGroupItem>
      <ToggleGroupItem value="photo">
        <Icon icon="lucide:file-image" />
      </ToggleGroupItem>
    </ToggleGroupRoot>
  </div>
</template>

Color ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import { ToggleGroupRoot, ToggleGroupItem } from '@typlog/ui'

const selected = ref<string>('left')
</script>

<template>
  <div class="flex items-center gap-2">
    <ToggleGroupRoot v-model="selected" variant="surface" color="green">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>

    <ToggleGroupRoot v-model="selected" variant="surface" color="red">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>

    <ToggleGroupRoot v-model="selected" variant="surface" color="gray">
      <ToggleGroupItem value="left">
        <Icon icon="lucide:align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center">
        <Icon icon="lucide:align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right">
        <Icon icon="lucide:align-right" />
      </ToggleGroupItem>
    </ToggleGroupRoot>
  </div>
</template>