GitHub
wwwwwwwwwwwwwwwwwww

ToggleGroup

Two-state buttons that can be toggled on or off

yarnnpmbunpnpm
import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'

import type { SizeTokens } from 'tamagui'

import { Label, ToggleGroup, XStack, YStack } from 'tamagui'



export function ToggleGroupDemo() {

  return (

    <YStack paddingHorizontal="$4">

      <XStack alignItems="center" space="$10">

        <YStack alignItems="center" space="$6">

          <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />

          <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />

        </YStack>

        <XStack alignItems="center" space="$6">

          <ToggleGroupComponent type="single" size="$3" orientation="vertical" />

          <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />

        </XStack>

      </XStack>

    </YStack>

  )

}



function ToggleGroupComponent(props: {

  size: SizeTokens

  type: 'single' | 'multiple'

  orientation: 'vertical' | 'horizontal'

}) {

  const id = `switch-${props.size.toString().slice(1)}-${props.type}`

  return (

    <XStack
      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}
      alignItems="center"
      justifyContent="center"
      space="$4"
    >

      <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>

        {props.type === 'single' ? 'Single' : 'Multiple'}

      </Label>



      {/* @ts-ignore */}

      <ToggleGroup
        orientation={props.orientation}
        id={id}
        type={props.type as any} // since this demo switches between loosen types
        size={props.size}
        disableDeactivation={props.type === 'single' ? true : undefined}
      >

        <ToggleGroup.Item value="left" aria-label="Left aligned">

          <AlignLeft />

        </ToggleGroup.Item>

        <ToggleGroup.Item value="center" aria-label="Center aligned">

          <AlignCenter />

        </ToggleGroup.Item>

        <ToggleGroup.Item value="right" aria-label="Right aligned">

          <AlignRight />

        </ToggleGroup.Item>

      </ToggleGroup>

    </XStack>

  )

}

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:

yarn add @tamagui/toggle-group

Usage

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 component. You can disable passing border radius to children by passing disablePassBorderRadius. plus:

Props

  • asChild

    boolean

    Default: 

    false

    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.

  • type

    enum

    Determines whether a single or multiple items can be pressed at a time.

  • value

    string

    The controlled value of the pressed item when type is "single". Must be used in conjunction with onValueChange.

  • defaultValue

    string

    The values of the items to show as pressed when initially rendered.

  • orientation

    enum

    Default: 

    horizontal

    The orientation of the component, which determines how focus moves: horizontal for left/right arrows and vertical for up/down arrows.

  • disabled

    boolean

    Default: 

    false

    When true, prevents the user from interacting with the toggle group and all its items.

  • onValueChange

    (value: string[]) => void

    Event handler called when the pressed state of an item changes and type is "multiple".

  • loop

    boolean

    Default: 

    true

    Whether or not to loop over after reaching the end or start of the items. Used mainly for managing keyboard navigation.

  • disableDeactivation

    boolean

    Default: 

    false

    Won't let the user turn the active item off. Only applied to single toggle group.

  • unstyled

    boolean

    Default: 

    false

    When true, remove all default tamagui styling.

  • sizeAdjust

    number

    Adjust the component's size scaling by this number.

    • ToggleGroup.Item

    ToggleGroup.Item extend Stack views inheriting all the Tamagui standard props, plus:

    Props

  • asChild

    boolean

    Default: 

    false

    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.

  • value

    string

    The controlled value of the pressed item when type is "single".

  • disabled

    boolean

    Default: 

    false

    When true, prevents the user from interacting with the toggle group item.

  • unstyled

    boolean

    Default: 

    false

    When true, remove all default tamagui styling.

    • When it is active, it will receive an active prop set to true. This means you can customize the active styles like so:

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

    import { styled } from 'tamagui'

    

    const MyToggleGroupItem = styled(ToggleGroup.Item, {

      variants: {

        active: {

          true: {

            backgroundColor: 'red'

          },

        },

      },

    })

    Previous

    Switch

    Next

    AlertDialog

    Edit this page on GitHub.