Skip to main content

Radio

Radio group wrapper that provides shared context for radio buttons to control selection state.

Vector icon

Usage​

import React, { useState } from 'react';
import { Radio } from '@/components';
import { List } from '@/components/List';

const PaymentSelector = () => {
  const [value, setValue] = useState('card');

  return (
    <Radio
      value={value}
      onValueChange={(val) => {
        setValue(val);
      }}
    >
      <List.Item title="Card" left={() => <Radio.RadioButton value="card" />} />
      <List.Item title="UPI" left={() => <Radio.RadioButton value="upi" />} />
    </Radio>
  );
};

export default PaymentSelector;

Props​

value​

Type : string

The current selected value.

onValueChange​

Type : (value: string) => void

callback invoked when a button is selected.

children​

Type : React.ReactNode

Radio buttons or list items.