Radio / RadioGroup

The Radio and RadioGroup components provide a way to offer multiple choices to users, where only one option can be selected at a time. RadioGroup acts as a container for managing multiple Radio components, ensuring only one is selected at any time.

Import

Phaselis exports Radio and RadioGroup components.

import { Radio, RadioGroup } from "phaselis";

• Radio: Main Component import for Radio
• RadioGroup: Main Component import for RadioGroup

Usage

Basic Radio & Radio Group

import { Radio, RadioGroup } from "phaselis";

const Example = () => {
  return (
    <RadioGroup name="Themes" value="light-theme">
      <Radio text="Light Theme" value="light-theme" />
      <Radio text="Dark Theme" value="dark-theme" />
    </RadioGroup>
  );
};

export default Example;

RadioGroup Props

value

string

The value of the selected Radio button.

<RadioGroup name="Choices" value="choice-1">
  <Radio text="Choice 1" value="choice-1" />
  <Radio text="Choice 2" value="choice-2" />
</RadioGroup>

onChange

(event: any, value: string) => void

Callback invoked when the group value changes.

<RadioGroup
  name="RadioGroup"
  value="yes"
  onChange={(event, newValue) => console.log(newValue)}
>
  <Radio text="Yes" value="yes" />
  <Radio text="No" value="no" />
</RadioGroup>

style

Name	Type	Description
group	ViewStyle	Style for the overall radio group layout.

You can style the RadioGroup with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the group element.

// Object with named styles
<RadioGroup
  name="options"
  value="A"
  style={{ group: { padding: 10, backgroundColor: "#f5f5f5", borderRadius: 8 } }}
>
  <Radio text="Option A" value="A" />
  <Radio text="Option B" value="B" />
</RadioGroup>

// Direct group styling
<RadioGroup
  name="options"
  value="A"
  style={{ padding: 16, gap: 12, backgroundColor: "#f0f8ff" }}
>
  <Radio text="Option A" value="A" />
  <Radio text="Option B" value="B" />
</RadioGroup>

Radio Props

text

string

The text displayed next to the radio button.

<Radio text="Accept" value="accept" />

value required

string

The unique value of the radio button.

<RadioGroup name="selection" value="yes">
  <Radio text="Yes" value="yes" />
  <Radio text="No" value="no" />
</RadioGroup>

onChange

(value: string) => void

Callback invoked when the radio button's value changes.

<Radio
  text="Choice"
  value="choice"
  onChange={(value) => console.log("Selected:", value)}
/>

disabled

boolean

Disables the radio button.

<Radio text="Unavailable Option" value="unavailable" disabled />

style

Name	Type	Description
container	ViewStyle	Style for the outer container view.
outerElement	ViewStyle	Style for the outer radio circle.
innerElement	ViewStyle	Style for the inner circle animation.
text	TextStyle	Style for the label text.

You can style the Radio with the style prop using either an object with named styles or directly provide TextStyle properties that will be applied to the text element.

// Object with named styles
<Radio
  text="Custom Styled Radio"
  value="custom"
  style={{
    container: { margin: 5 },
    outerElement: { borderColor: "#0c5ae9" },
    innerElement: { backgroundColor: "#0c5ae9" },
    text: { fontSize: 14, color: "#323439" },
  }}
/>

// Direct text styling
<Radio
  text="Styled Label"
  value="styled"
  style={{ fontSize: 16, fontWeight: "bold", color: "#0066cc", marginLeft: 8 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the container element.

<Radio 
  text="Spaced Option" 
  value="spaced" 
  containerStyle={{ marginVertical: 8 }} 
/>

outerElementStyle

ViewStyle

Additional style applied directly to the outer radio circle.

<Radio 
  text="Custom Radio" 
  value="custom" 
  outerElementStyle={{ borderWidth: 2, borderColor: "#0066cc" }} 
/>

innerElementStyle

ViewStyle

Additional style applied directly to the inner radio circle (the selected indicator).

<Radio 
  text="Custom Indicator" 
  value="indicator" 
  innerElementStyle={{ backgroundColor: "#ff6600" }} 
/>

variation

default | primary | secondary | tertiary

Determines the style of the radio button.

• default: Applies the default radio button style.
• primary: Applies the primary radio button style.
• secondary: Applies the secondary radio button style.
• tertiary: Applies the tertiary radio button style.

<Radio text="Dark Theme" value="dark-theme" variation="secondary" />