wwwwwwwwwwwwwwwwwww

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:

npm install @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 extend Stack views inheriting all the Tamagui standard props, plus:

Props

  • name

    string

    Equivalent to input name.

  • value

    string

    Give it a value (for use in HTML forms).

  • required

    boolean

    Sets aria-required.

  • disabled

    boolean

    Set aria-disabled on web, and disable touch on native for all children items

  • native

    boolean

    Renders native radio button on web.

  • onValueChange

    (value: string) => void

  • accentColor

    string

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

    • RadioGroup.Item

    Props

  • labeledBy

    string

    Set aria-labeled-by on web

  • value

    string

    Input value for the radio button.

  • disabled

    boolean

    Set aria-disabled on web, and disable touch on native

  • id

    string

    Id used on the web

  • scaleSize

    number

    Default: 

    0.5

    The Tamagui size tokens should map to the height of a button at any given step. This means you want somewhat smaller checkboxes typically.

  • unstyled

    boolean

    Default: 

    false

    When true, remove 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.