Components
Toggle group

Toggle Group

A set of toggle buttons for selection within a group.

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>
  )
}

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>
  )
}

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>
  )
}

Previous

Toast

Next

Tooltip