GitHub
wwwwwwwwwwwwwwwwwww

ToggleGroup

Two-state buttons that can be toggled on or off.

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.

  • toggledStyle

    object

    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, 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.

  • toggledStyle

    object

    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:

    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:

    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:

    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.