Skip to content
Docs
Components
Inputs
Radio

Radio

Component to render a radio input.

Import

import { Radio, RadioGroup } from 'react-native-ficus-ui';

Usage

Simple checkbox

EDITABLE EXAMPLE
<Box>
  <Radio value={1}>Label</Radio>
  <Radio value={2} defaultChecked>
    Label
  </Radio>
  <Radio value={3} colorScheme="green">
    Label
  </Radio>
  <Radio value={4} isDisabled>
    Label
  </Radio>
  <Radio value={5}>
    Label
  </Radio>
</Box>

Simple radio group

EDITABLE EXAMPLE
<RadioGroup colorScheme="red">
  <VStack spacing="sm">
    <Radio value={1}>
      Option 1
    </Radio>
    <Radio value={2}>
      Option 2
    </Radio>
    <Radio value={3}>
      Option 3
    </Radio>
  </VStack>
</RadioGroup>

Radio sizes

EDITABLE EXAMPLE
<RadioGroup>
  <VStack spacing="sm">
    <Radio value={1} size="xs">
      Option 1
    </Radio>
    <Radio value={2} size="sm">
      Option 2
    </Radio>
    <Radio value={3} size="md">
      Option 3
    </Radio>
    <Radio value={4} size="lg">
      Option 4
    </Radio>
  </VStack>
</RadioGroup>

Checkbox disabled

EDITABLE EXAMPLE
<HStack spacing="md">
  <Radio isDisabled>
    Option 1
  </Radio>
  <Radio isDisabled defaultChecked>
    Option 1
  </Radio>
</HStack>

Custom render

EDITABLE EXAMPLE
<RadioGroup colorScheme="red">
  <HStack spacing="md">
    {["Option 1", "Option 2", "Option 3"].map((item) => (
        <Radio value={item}>
          {({ isChecked }) => (
            <Badge
              variant={isChecked ? "solid" : "subtle"}
              colorScheme="pink"
              fontSize="xl"
              px="lg"
              py="lg"
              borderRadius="full"
            >
              {item}
            </Badge>
          )}
        </Radio>
    ))}
  </HStack>
</RadioGroup>

Props

Radio props

Extends every TouchableOpacity props.

colorScheme

The colorScheme property, will define radio color.

TypeRequiredDefault
stringNo

defaultChecked

Boolean to indicate if radio should be checked by default.

TypeRequiredDefault
booleanNo

isChecked

Boolean to indicate if radio is checked.

TypeRequiredDefault
booleanNo

isDisabled

Boolean to indicate if radio is disabled.

TypeRequiredDefault
booleanNo

value

The value to be used in the radio.

TypeRequiredDefault
(value: string | number) => voidNo

onChange

Function called when checked status changes on radio, value is returned as param.

TypeRequiredDefault
(value: string | number) => voidNo

size

Size of radio.

TypeRequiredDefault
number | 'xs' | 'sm' | 'md' | 'lg'No

RadioGroup props

value

The value of the radio group.

TypeRequiredDefault
(value: string | number) => voidNo

onChange

Function called when checked status changes on any radio children, value is returned as param.

TypeRequiredDefault
(value: (string | number)) => voidNo

defaultValue

Default value for the radio group.

TypeRequiredDefault
(string | number)No

colorScheme

The colorScheme property, will define group radios color.

TypeRequiredDefault
stringNo