wwwwwwwwwwwwwwwwwww

RadioGroup

Use in a form to allow selecting one option from multiple

 
import type { SizeTokens } from 'tamagui'

import { Label, RadioGroup, XStack, YStack } from 'tamagui'



export function RadioGroupDemo() {

  return (

    <RadioGroup aria-labelledby="Select one item" defaultValue="3" name="form">

      <YStack width={300} alignItems="center" space="$2">

        <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />

        <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />

        <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />

      </YStack>

    </RadioGroup>

  )

}



export function RadioGroupItemWithLabel(props: {

  size: SizeTokens

  value: string

  label: string

}) {

  const id = `radiogroup-${props.value}`

  return (

    <XStack width={300} alignItems="center" space="$4">

      <RadioGroup.Item value={props.value} id={id} size={props.size}>

        <RadioGroup.Indicator />

      </RadioGroup.Item>



      <Label size={props.size} htmlFor={id}>

        {props.label}

      </Label>

    </XStack>

  )

}

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