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:

npm install @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.