RadioField

RadioField wraps the Radio component inside a FieldContainer. It renders a list of options and calls onChange with the selected option's value. A custom renderOption function can replace the default radio-button appearance entirely.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | options | any[] | Yes | — | Array of option objects. Each object should have at minimum value and label keys (exact shape depends on the underlying Radio component). | | value | string | Yes | — | Currently selected option value. | | onChange | (optionName: string) => void | Yes | — | Called with the selected option's value when the user picks a different option. | | label | string | No | — | Label rendered in the field header. | | description | string | No | — | Helper text rendered below the field. | | useCustomRender | boolean | No | false | When true, renderOption is passed down to the Radio component to replace the default layout. | | renderOption | (option: any, isClickable?: boolean, index?: number, isActive?: boolean) => React.ReactNode | No | — | Custom render function for each option (only used when useCustomRender is true). | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the options body (passed as containerStyle to Radio). | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. |

Usage

Basic

import React, { useState } from 'react';
import RadioField from '@/components/fields/RadioField';

const options = [
  { label: 'Internal', value: 'internal' },
  { label: 'External', value: 'external' },
];

export default function Example() {
  const [userType, setUserType] = useState('internal');

  return (
    <RadioField
      label="User type"
      options={options}
      value={userType}
      onChange={setUserType}
    />
  );
}

With custom option renderer

<RadioField
  label="Priority"
  options={[
    { label: 'Low', value: 'low', color: '#4CC2B6' },
    { label: 'Medium', value: 'medium', color: '#FFD567' },
    { label: 'High', value: 'high', color: '#F59A8E' },
  ]}
  value={priority}
  onChange={setPriority}
  useCustomRender={true}
  renderOption={(option, _clickable, _index, isActive) => (
    <div style={{
      padding: '8px 16px',
      borderRadius: 8,
      backgroundColor: isActive ? option.color : '#f0f0f0',
      fontWeight: isActive ? 'bold' : 'normal',
    }}>
      {option.label}
    </div>
  )}
/>