# Source: https://tamagui.dev/ui/toggle-group.md

---
title: ToggleGroup
description: Two-state buttons that can be toggled on or off.
name: toggleGroup
component: ToggleGroup
package: toggle-group
demoName: ToggleGroup
---

<HeroContainer>
  <ToggleGroupDemo />
</HeroContainer>

```tsx hero template=ToggleGroup

```

<Highlights
  features={[
    `Full keyboard navigation.`,
    `Supports horizontal/vertical orientation.`,
    `Support single and multiple pressed buttons.`,
    `Can be controlled or uncontrolled.`,
  ]}
/>

## Installation

ToggleGroup is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/toggle-group
```

## Usage

```tsx
import { ToggleGroup } from 'tamagui'

export default () => {
  return (
    <ToggleGroup type="single">
      <ToggleGroup.Item value="foo"></ToggleGroup.Item>
      <ToggleGroup.Item value="bar"></ToggleGroup.Item>
    </ToggleGroup>
  )
}
```

## API Reference

### ToggleGroup

`ToggleGroup` extends the [Group](/docs/components/group) component. You can disable passing border radius to children by passing `disablePassBorderRadius`. plus:

<PropsTable
  data={[
    {
      name: 'asChild',
      type: 'boolean',
      description: `When true, Tamagui expects a single child element. Instead of rendering its own element, it will pass all props to that child, merging together any event handling props.`,
      default: `false`,
    },
    {
      name: 'type',
      type: 'enum',
      description: `Determines whether a single or multiple items can be pressed at a time.`,
    },
    {
      name: 'value',
      type: 'string',
      description: `The controlled value of the pressed item when type is "single". Must be used in conjunction with onValueChange.`,
    },
    {
      name: 'defaultValue',
      description: 'The values of the items to show as pressed when initially rendered.',
      type: 'string',
      default: ``,
    },
    {
      name: 'orientation',
      type: 'enum',
      description: `The orientation of the component, which determines how focus moves: horizontal for left/right arrows and vertical for up/down arrows.`,
      default: `horizontal`,
    },
    {
      name: 'disabled',
      type: 'boolean',
      description: `When true, prevents the user from interacting with the toggle group and all its items.`,
      default: `false`,
    },
    {
      name: 'onValueChange',
      type: '(value: string[]) => void',
      description: `Event handler called when the pressed state of an item changes and type is "multiple".`,
    },
    {
      name: 'loop',
      type: 'boolean',
      description: `Whether or not to loop over after reaching the end or start of the items. Used mainly for managing keyboard navigation.`,
      default: `true`,
    },
    {
      name: 'disableDeactivation',
      type: 'boolean',
      description: `Won't let the user turn the active item off. Only applied to single toggle group.`,
      default: 'false',
    },
    {
      name: 'unstyled',
      type: 'boolean',
      default: 'false',
      description: `When true, remove all default tamagui styling.`,
    },
    {
      name: 'sizeAdjust',
      type: 'number',
      description: `Adjust the component's size scaling by this number.`,
    },
    {
      name: 'toggledStyle',
      type: 'object',
      description: `Styles to apply to all items when they are in the pressed/active state. This is passed down via context to all ToggleGroup.Item children.`,
    },
  ]}
/>

### ToggleGroup.Item

`ToggleGroup.Item` extend Stack views inheriting all the [Tamagui standard props](notion://www.notion.so/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'asChild',
      type: 'boolean',
      description: `When true, Tamagui expects a single child element. Instead of rendering its own element, it will pass all props to that child, merging together any event handling props.`,
      default: `false`,
    },
    {
      name: 'value',
      type: 'string',
      description: `The controlled value of the pressed item when type is "single".`,
    },
    {
      name: 'disabled',
      type: 'boolean',
      description: `When true, prevents the user from interacting with the toggle group item.`,
      default: `false`,
    },
    {
      name: 'unstyled',
      type: 'boolean',
      default: 'false',
      description: `When true, remove all default tamagui styling.`,
    },
    {
      name: 'toggledStyle',
      type: 'object',
      description: `Styles to apply when the item is in the pressed/active state. Overrides any toggledStyle set on the parent ToggleGroup.`,
    },
  ]}
/>

When it is active, it will receive an `active` prop set to true. You can customize active styles in two ways:

### Using toggledStyle prop

The simplest way to customize the active state is with the `toggledStyle` prop:

```tsx
import { ToggleGroup } from '@tamagui/toggle-group'

// Apply to all items via the parent
<ToggleGroup type="single" toggledStyle={{ backgroundColor: '$green9', color: '$white' }}>
  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
</ToggleGroup>

// Or apply to individual items
<ToggleGroup type="single">
  <ToggleGroup.Item value="a" toggledStyle={{ backgroundColor: '$red9' }}>A</ToggleGroup.Item>
  <ToggleGroup.Item value="b" toggledStyle={{ backgroundColor: '$blue9' }}>B</ToggleGroup.Item>
</ToggleGroup>
```

You can also use `toggledStyle` when creating styled components:

```tsx
import { ToggleGroup } from '@tamagui/toggle-group'
import { styled } from 'tamagui'

const MyToggleGroupItem = styled(ToggleGroup.Item, {
  toggledStyle: {
    backgroundColor: '$green9',
    color: '$yellow9',
  },
})
```

### Using the active variant

For more complex styling needs, you can use the `active` variant:

```tsx
import { ToggleGroup } from '@tamagui/toggle-group'
import { styled } from 'tamagui'

const MyToggleGroupItem = styled(ToggleGroup.Item, {
  variants: {
    active: {
      true: {
        backgroundColor: 'red'
      },
    },
  },
})
```