GitHub

RadioGroup

Use in a form to allow selecting one option from multiple

Features

  • Accessible, easy to compose and customize.

  • Sizable & works controlled or uncontrolled.

  • Ability to opt-out to native radio button on web.

Installation

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

yarn add @tamagui/radio-group

Usage

import { RadioGroup } from 'tamagui'



export default () => (

  <RadioGroup value="foo" gap="$2">

    <RadioGroup.Item value="foo" id="foo-radio-item">

      <RadioGroup.Indicator />

    </RadioGroup.Item>

    <RadioGroup.Item value="bar" id="bar-radio-item">

      <RadioGroup.Indicator />

    </RadioGroup.Item>

  </RadioGroup>

)

API Reference

RadioGroup

RadioGroup extends Stack views inheriting all the Tamagui standard props, plus:

Props

  • name

    string

    Equivalent to input name attribute.

  • value

    string

    Controlled value of the selected radio item.

  • defaultValue

    string

    Default value for uncontrolled usage.

  • required

    boolean

    Sets aria-required attribute.

  • disabled

    boolean

    Sets aria-disabled on web, and disables touch on native for all children items.

  • native

    boolean

    Default: 

    false

    Renders native radio button on web.

  • onValueChange

    (value: string) => void

    Called when the selected value changes.

  • orientation

    "horizontal" | "vertical"

    Orientation of the radio group.

  • accentColor

    string

    Sets `accent-color` style when `native` prop is enabled.

    • RadioGroup.Item

    Props

  • labeledBy

    string

    Sets aria-labelledby on web.

  • value

    string

    Input value for the radio button.

  • disabled

    boolean

    Sets aria-disabled on web, and disables touch on native.

  • id

    string

    ID used on the web.

  • scaleSize

    number

    Default: 

    0.5

    Scale factor for the radio item size. Tamagui size tokens map to button heights, so you typically want smaller radio buttons.

  • unstyled

    boolean

    Default: 

    false

    When true, removes all default Tamagui styling.

    • RadioGroup.Indicator

    RadioGroup.Indicator appears only when the parent Item is checked. It extends ThemeableStack, getting Tamagui standard props adding:

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Previous

    Progress

    Next

    Select

    Edit this page on GitHub.