Ark UI

Basic Usage

A simple example with three toggles: A, B, and C.

import { ToggleGroup } from '@ark-ui/react'

const Basic = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
    </ToggleGroup.Root>
  )
}

import { ToggleGroup } from '@ark-ui/solid'

const Basic = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
    </ToggleGroup.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@ark-ui/vue'

const value = ref(['b'])
</script>

<template>
  <ToggleGroup.Root>
    <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
    <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
    <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
  </ToggleGroup.Root>
</template>

Multiple Selection

Demonstrates how to enable multiple selection within the group.

import { ToggleGroup } from '@ark-ui/react'

const Multiple = () => {
  return (
    <ToggleGroup.Root multiple>
      <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
    </ToggleGroup.Root>
  )
}

import { ToggleGroup } from '@ark-ui/solid'

const Multiple = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
    </ToggleGroup.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@ark-ui/vue'

const value = ref(['b'])
</script>

<template>
  <ToggleGroup.Root multiple>
    <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
    <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
    <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
  </ToggleGroup.Root>
</template>

Initial Value

Shows how to set an initial value in the toggle group.

import { ToggleGroup } from '@ark-ui/react'

const Initialvalue = () => {
  return (
    <ToggleGroup.Root defaultValue={['b']}>
      <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
    </ToggleGroup.Root>
  )
}

import { ToggleGroup } from '@ark-ui/solid'

const Initialvalue = () => {
  return (
    <ToggleGroup.Root value={['b']}>
      <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
      <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
    </ToggleGroup.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@ark-ui/vue'

const value = ref(['b'])
</script>

<template>
  <ToggleGroup.Root v-model="value">
    <ToggleGroup.Toggle value="a">A</ToggleGroup.Toggle>
    <ToggleGroup.Toggle value="b">B</ToggleGroup.Toggle>
    <ToggleGroup.Toggle value="c">C</ToggleGroup.Toggle>
  </ToggleGroup.Root>
</template>

Toggle Group

Basic Usage

Multiple Selection

Initial Value