How-to Guides
Using RadioGroup

RadioGroup

Complex RadioGroup Layouts

RadioGroupOptions always store their value in the nearest RadioGroup parent and can be placed in elaborate layouts.

<App>
  <RadioGroup initialValue="first">
    Group #1
    <Card gap="$space-2">
      <Option label="First Item" value="first"/>
      <Stack backgroundColor="$backgroundColor-overlay">
        <Option label="Second Item" value="second"/>
      </Stack>
      <Option label="Third Item" value="third"/>
      <RadioGroup initialValue="second">
        Group #2
        <Card gap="$space-2">
          <Option label="First Item" value="first"/>
          <Option label="Second Item" value="second"/>
        </Card>
      </RadioGroup>
    </Card>
  </RadioGroup>
</App>
Using FooterLayout