Radio | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  const [value, setValue] = React.useState("one");
  return <Radio.Group name="myRadioGroup" accessibilityLabel="favorite number" value={value} onChange={nextValue => {
    setValue(nextValue);
  }}>
      <Radio value="one" my={1}>
        One
      </Radio>
      <Radio value="two" my={1}>
        Two
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  const [value, setValue] = React.useState("one");
  return <Radio.Group name="myRadioGroup" accessibilityLabel="favorite number" value={value} onChange={nextValue => {
    setValue(nextValue);
  }}>
      <Radio value="one" my={1}>
        One
      </Radio>
      <Radio value="two" my={1}>
        Two
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Radio.Group defaultValue="1" name="myRadioGroup" accessibilityLabel="Pick your favorite number">
      <Radio value="1" my={1}>
        First
      </Radio>
      <Radio value="2" my={1}>
        Second
      </Radio>
      <Radio value="3" my={1}>
        Third
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  return <Radio.Group defaultValue="1" name="myRadioGroup" accessibilityLabel="Pick your favorite number">
      <Radio value="1" my={1}>
        First
      </Radio>
      <Radio value="2" my={1}>
        Second
      </Radio>
      <Radio value="3" my={1}>
        Third
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Radio.Group defaultValue="2" name="exampleGroup" accessibilityLabel="select prize">
      <Radio value="1" my={1} isDisabled>
        First
      </Radio>
      <Radio value="2" my={1}>
        Second
      </Radio>
      <Radio value="3" my={1}>
        Third
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  return <Radio.Group defaultValue="2" name="exampleGroup" accessibilityLabel="select prize">
      <Radio value="1" my={1} isDisabled>
        First
      </Radio>
      <Radio value="2" my={1}>
        Second
      </Radio>
      <Radio value="3" my={1}>
        Third
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Radio.Group name="exampleGroup" accessibilityLabel="select an option">
      <Radio value="test" isInvalid>
        Invalid Radio
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  return <Radio.Group name="exampleGroup" accessibilityLabel="select an option">
      <Radio value="test" isInvalid>
        Invalid Radio
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Radio.Group name="exampleGroup" defaultValue="1" accessibilityLabel="pick a size">
      <Radio value="1" colorScheme="red" size="sm" my={1}>
        Small
      </Radio>
      <Radio value="2" colorScheme="green" size="md" my={1}>
        Medium
      </Radio>
      <Radio value="3" colorScheme="yellow" size="lg" my={1}>
        Large
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  return <Radio.Group name="exampleGroup" defaultValue="1" accessibilityLabel="pick a size">
      <Radio value="1" colorScheme="red" size="sm" my={1}>
        Small
      </Radio>
      <Radio value="2" colorScheme="green" size="md" my={1}>
        Medium
      </Radio>
      <Radio value="3" colorScheme="yellow" size="lg" my={1}>
        Large
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Radio.Group defaultValue="1" name="exampleGroup" accessibilityLabel="favorite colorscheme">
      <Radio colorScheme="emerald" value="1" my={1}>
        emerald
      </Radio>
      <Radio colorScheme="secondary" value="2" my={1}>
        secondary
      </Radio>
      <Radio colorScheme="warning" value="3" my={1}>
        warning
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  return <Radio.Group defaultValue="1" name="exampleGroup" accessibilityLabel="favorite colorscheme">
      <Radio colorScheme="emerald" value="1" my={1}>
        emerald
      </Radio>
      <Radio colorScheme="secondary" value="2" my={1}>
        secondary
      </Radio>
      <Radio colorScheme="warning" value="3" my={1}>
        warning
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Radio.Group defaultValue="1" size="lg" name="exampleGroup" accessibilityLabel="pick a choice">
      <Radio _text={{
      mx: 2
    }} colorScheme="green" value="1" icon={<Icon as={<MaterialCommunityIcons name="alien" />} />} my={1}>
        Alien
      </Radio>
      <Radio _text={{
      mx: 2
    }} colorScheme="red" value="2" icon={<Icon as={<MaterialCommunityIcons name="fire" />} />} my={1}>
        Fire
      </Radio>
      <Radio colorScheme="warning" _text={{
      mx: 2
    }} value="3" icon={<Icon as={<MaterialCommunityIcons name="exclamation" />} />} my={1}>
        Warning
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  return <Radio.Group defaultValue="1" size="lg" name="exampleGroup" accessibilityLabel="pick a choice">
      <Radio _text={{
      mx: 2
    }} colorScheme="green" value="1" icon={<Icon as={<MaterialCommunityIcons name="alien" />} />} my={1}>
        Alien
      </Radio>
      <Radio _text={{
      mx: 2
    }} colorScheme="red" value="2" icon={<Icon as={<MaterialCommunityIcons name="fire" />} />} my={1}>
        Fire
      </Radio>
      <Radio colorScheme="warning" _text={{
      mx: 2
    }} value="3" icon={<Icon as={<MaterialCommunityIcons name="exclamation" />} />} my={1}>
        Warning
      </Radio>
    </Radio.Group>;
};

Playground
const Example = () => {
  return <Container>
      <FormControl isRequired isInvalid>
        <FormControl.Label>Select One</FormControl.Label>
        <Radio.Group defaultValue="1" name="exampleGroup" accessibilityLabel="select prize">
          <Radio value="1" my={1}>
            First
          </Radio>
          <Radio value="2" my={1}>
            Second
          </Radio>
          <Radio value="3" my={1}>
            Third
          </Radio>
        </Radio.Group>
        <FormControl.HelperText my={1}>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </FormControl>
    </Container>;
};
const Example = () => {
  return <Container>
      <FormControl isRequired isInvalid>
        <FormControl.Label>Select One</FormControl.Label>
        <Radio.Group defaultValue="1" name="exampleGroup" accessibilityLabel="select prize">
          <Radio value="1" my={1}>
            First
          </Radio>
          <Radio value="2" my={1}>
            Second
          </Radio>
          <Radio value="3" my={1}>
            Third
          </Radio>
        </Radio.Group>
        <FormControl.HelperText my={1}>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </FormControl>
    </Container>;
};

Playground
const Example = () => {
  const myRef = React.useRef({});
  return <Radio.Group name="exampleGroup" colorScheme="success" accessibilityLabel="pick an option" onChange={value => {
    if (value === "2") myRef.current.setNativeProps({
      backgroundColor: "#00de0050"
    });else myRef.current.setNativeProps({
      backgroundColor: "#fa000050"
    });
  }}>
      <Radio colorScheme="success" value="1" my={1}>
        Wrong
      </Radio>
      <Radio colorScheme="success" ref={myRef} value="2" my={1}>
        Right
      </Radio>
    </Radio.Group>;
};
const Example = () => {
  const myRef = React.useRef({});
  return <Radio.Group name="exampleGroup" colorScheme="success" accessibilityLabel="pick an option" onChange={value => {
    if (value === "2") myRef.current.setNativeProps({
      backgroundColor: "#00de0050"
    });else myRef.current.setNativeProps({
      backgroundColor: "#fa000050"
    });
  }}>
      <Radio colorScheme="success" value="1" my={1}>
        Wrong
      </Radio>
      <Radio colorScheme="success" ref={myRef} value="2" my={1}>
        Right
      </Radio>
    </Radio.Group>;
};