Basic Usage
A simple example with three toggles: A, B, and C.
import { ToggleGroup } from '@ark-ui/react'
const Basic = () => {
return (
<ToggleGroup.Root>
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>
)
}
import { ToggleGroup } from '@ark-ui/solid'
const Basic = () => {
return (
<ToggleGroup.Root>
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</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.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</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.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>
)
}
import { ToggleGroup } from '@ark-ui/solid'
const Multiple = () => {
return (
<ToggleGroup.Root>
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</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.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</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.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>
)
}
import { ToggleGroup } from '@ark-ui/solid'
const Initialvalue = () => {
return (
<ToggleGroup.Root value={['b']}>
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</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.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>
</template>