wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Stack & Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

RadioGroup

Use in a form to allow selecting only one option of multiple.

Features

  • Accessible, easy to compose and customize.

  • Sizable & works controlled or uncontrolled.

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

Usage

 
import { RadioGroup } from 'tamagui'

export default () => (

  <RadioGroup size="$4" value="foo" space="$1">

    <RadioGroup.Item id="dummy" value="foo">

      <RadioGroup.Indicator />

    </RadioGroup.Item>

    <RadioGroup.Item id="other" value="bar">

      <RadioGroup.Indicator />

    </RadioGroup.Item>

  </RadioGroup>

)

RadioGroup props

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

    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 props

    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.