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.

Type	Required	Default
string	No

`defaultChecked`

Boolean to indicate if radio should be checked by default.

Type	Required	Default
boolean	No

`isChecked`

Boolean to indicate if radio is checked.

Type	Required	Default
boolean	No

`isDisabled`

Boolean to indicate if radio is disabled.

Type	Required	Default
boolean	No

`value`

The value to be used in the radio.

Type	Required	Default
(value: string \| number) => void	No

`onChange`

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

Type	Required	Default
(value: string \| number) => void	No

`size`

Size of radio.

Type	Required	Default
number \| 'xs' \| 'sm' \| 'md' \| 'lg'	No

RadioGroup props

`value`

The value of the radio group.

Type	Required	Default
(value: string \| number) => void	No

`onChange`

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

Type	Required	Default
(value: (string \| number)) => void	No

`defaultValue`

Default value for the radio group.

Type	Required	Default
(string \| number)	No

`colorScheme`

The colorScheme property, will define group radios color.

Type	Required	Default
string	No

Checkbox Input