@razorpay/blade-mcp/knowledgebase/components/Radio.md

Model Context Protocol server for Blade

## Component Name

Radio & RadioGroup

## Description

The Radio and RadioGroup components are used in forms when a user needs to select a single value from multiple options. RadioGroup serves as a container for Radio components, allowing users to make a single selection from a set of options. It handles state management and provides accessible markup with features like validation states, help text, and various size options.

## Important Constraints

- `Radio` component cannot be used outside of `RadioGroup` component
- `RadioGroup` component only accepts `Radio` components as children

The browser throws an error if you don't follow the above rules. Make sure to only follow structure as given in the examples below. Fragments are also not allowed as children in these components.

## TypeScript Types

These types represent the props that the component accepts. When using the Radio component along with RadioGroup, you'll need to understand these types to properly configure them.

```typescript
type RadioProps = {
  /**
   * Sets the label text of the Radio
   */
  children?: StringChildrenType;
  /**
   * Help text for the Radio
   */
  helpText?: string;
  /**
   * The value to be used in the Radio input.
   * This is the value that will be returned on form submission.
   */
  value: string;
  /**
   * If `true`, the Radio will be disabled
   *
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Size of the radios
   *
   * @default "medium"
   */
  size?: 'small' | 'medium' | 'large';
} & TestID &
  DataAnalyticsAttribute &
  StyledPropsBlade &
  MotionMetaProp;

type RadioGroupProps = {
  /**
   * Accepts multiple radios as children
   */
  children: React.ReactNode;
  /**
   * Help text of the radio group
   */
  helpText?: string;
  /**
   * Error text of the radio group
   * Renders when `validationState` is set to 'error'
   *
   * Overrides helpText
   */
  errorText?: string;
  /**
   * Sets the error state of the radioGroup
   * If set to `error` it will render the `errorText` of the group,
   * and propagate `invalid` prop to every radio
   */
  validationState?: 'error' | 'none';
  /**
   * Renders a necessity indicator after radioGroup label
   *
   * If set to `undefined` it renders nothing.
   */
  necessityIndicator?: 'required' | 'optional' | 'none';
  /**
   * Sets the disabled state of the radioGroup
   * If set to `true` it propagate down to all the radios
   *
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Sets the required state of the radioGroup
   * @default false
   */
  isRequired?: boolean;
  /**
   * Renders the label of the radio group
   */
  label?: string;
  /**
   * Sets the position of the label
   *
   * @default 'top'
   */
  labelPosition?: 'top' | 'left';
  /**
   * Initial value of the radio group
   */
  defaultValue?: string;
  /**
   * value of the radio group
   *
   * Use `onChange` to update its value
   */
  value?: string;
  /**
   * The callback invoked when any of the radio's state changes
   */
  onChange?: ({
    name,
    value,
    event,
  }: {
    name: string | undefined;
    value: string;
    event: React.ChangeEvent<HTMLInputElement>;
  }) => void;
  /**
   * The name of the input field in a radio
   * (Useful for form submission).
   */
  name?: string;
  /**
   * Size of the radios
   *
   * @default "medium"
   */
  size?: 'small' | 'medium' | 'large';
} & TestID &
  DataAnalyticsAttribute &
  StyledPropsBlade;

type OnChange = ({
  isChecked,
  event,
  value,
}: {
  isChecked: boolean;
  event: React.ChangeEvent;
  value?: string;
}) => void;

type RadioGroupContextType = Pick<
  RadioGroupProps,
  | 'validationState'
  | 'isDisabled'
  | 'isRequired'
  | 'labelPosition'
  | 'name'
  | 'defaultValue'
  | 'value'
  | 'onChange'
  | 'necessityIndicator'
  | 'size'
> & { state?: State };
```

## Example

### Basic Usage

This example demonstrates a standard RadioGroup with multiple Radio options of different sizes and states, including disabled options and help text.

```tsx
import { RadioGroup, Radio } from '@razorpay/blade/components';
import { Box } from '@razorpay/blade/components';

function BasicRadioExample() {
  const handleChange = ({ name, value }) => {
    console.log(`Selected ${value} for ${name}`);
  };

  return (
    <Box gap="spacing.5">
      {/* Standard RadioGroup with different sizes and states */}
      <RadioGroup
        label="Where do you want to collect payments?"
        helpText="Select only one option"
        name="payment-collection"
        onChange={handleChange}
        defaultValue="website"
        necessityIndicator="required"
      >
        <Radio value="website">Website</Radio>
        <Radio value="android">Android App</Radio>
        <Radio value="ios">iOS App</Radio>
        <Radio value="social-media" helpText="Like WhatsApp, Facebook, Instagram">
          Social Media
        </Radio>
        <Radio value="offline-store" isDisabled>
          Offline Store
        </Radio>
      </RadioGroup>
    </Box>
  );
}
```

### Controlled Radio Example

This example shows how to implement a controlled RadioGroup where the selected value is managed through React state, with the selection reflected in the help text.

```tsx
import { RadioGroup, Radio } from '@razorpay/blade/components';
import { Box } from '@razorpay/blade/components';
import { useState } from 'react';

function ControlledRadioExample() {
  const [selected, setSelected] = useState('apple');

  return (
    <Box>
      <RadioGroup
        label="Select your favorite fruit"
        helpText={`You selected: ${selected}`}
        name="fruits"
        value={selected}
        onChange={({ value }) => setSelected(value)}
        size="medium"
        labelPosition="left"
      >
        <Radio value="apple" helpText="Apples are 25% air">
          Apple
        </Radio>
        <Radio value="mango" helpText="The name 'mango' originated in India">
          Mango
        </Radio>
        <Radio value="orange" helpText="There are over 600 varieties of oranges">
          Orange
        </Radio>
      </RadioGroup>
    </Box>
  );
}
```