Radio Component

The Radio component is a customizable radio button group for React Native applications. It allows users to select a single option from a list of choices.

Import

import { Radio } from "@appmaker-xyz/ui";

Usage

<Radio
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" },
  ]}
  onPress={(value, label) => console.log(`Selected: ${label} (${value})`)}
  color="#007AFF"
  initialSelectedValue="option1"
/>

Props

Radio Component

Prop	Type	Required	Default	Description
options	Array of Objects	Yes	-	An array of option objects, each containing label and value properties.
onPress	Function	Yes	-	Callback function called when an option is selected. Receives value and label as arguments.
color	String	No	'#000000'	The color of the radio buttons.
initialSelectedValue	String or Object	No	null	The initially selected value. If not provided, the first option will be selected by default.
textStyles	Object	No	{}	Additional styles to apply to the option labels.

Option Object (within options array)

Property	Type	Required	Description
label	String	Yes	The text displayed next to the radio button.
value	String or Object	Yes	The value associated with the option.
id	String or Number	No	An optional unique identifier for the option.

Notes

• The component supports both string and object values for radio options.
• If an option's value is an object with an id property, it will be used for comparison instead of the entire object.