RadioGroup

<Highlights 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:

<PropsTable data={[ { name: 'name', type: 'string', description: Equivalent to input name., }, { name: 'value', type: 'string', description: Give it a value (for use in HTML forms)., }, { name: 'required', type: 'boolean', description: Sets aria-required., }, { name: 'disabled', type: 'boolean', description: Set aria-disabled on web, and disable touch on native for all children items, }, { name: 'native', type: 'boolean', description: Renders native radio button on web., default: false, }, { name: 'onValueChange', type: '(value: string) => void', }, { name: 'accentColor', type: 'string', description: 'Sets accent-color style when native prop is enabled', }, ]} />

RadioGroup.Item

<PropsTable data={[ { name: 'labeledBy', type: 'string', description: Set aria-labeled-by on web, }, { name: 'value', type: 'string', description: Input value for the radio button., }, { name: 'disabled', type: 'boolean', description: Set aria-disabled on web, and disable touch on native, }, { name: 'id', type: 'string', description: Id used on the web, }, { name: 'scaleSize', type: 'number', default: '0.5', description: The Tamagui size tokens should map to the height of a button at any given step. This means you want somewhat smaller checkboxes typically., }, { name: 'unstyled', type: 'boolean', default: 'false', description: 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:

<PropsTable data={[ { name: 'unstyled', required: false, type: boolean, description: Removes all default Tamagui styles., }, ]} />