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