Radio buttons

Single radio button props

Name	Type	Default	Description
label	string	-	The label displayed next to the radio button.
name	string	-	The name of field being registerd.
value	string	-	The value assigned to the radio button.
isDisabled	boolean	-	Disables the radio button when true.
dataTestId	string	''	A data-testid attribute for testing purposes.

Radio buttons group props

Name	Type	Default	Description
fields	Array<TRadioButton>	[]	Array of objects representing the properties for individual radio buttons.
label	string	-	The label displayed for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
labelConfig	object	{ labelClassName: {}, labelTextClassName: {} }	Configuration for customizing label styles. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
id	string	-	The unique identifier for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
tooltip	string	''	Tooltip content to display additional information. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
dependsOnField	object	{ fieldName: '', value: [] }	Defines dependencies on another field (To show or hide this component,based on state of some field), specifying the field name and expected value(s). If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.

Config example

const radioButtonConfig = {
  type: 'radio',
  data: {
    name: 'contactMethod',
    label: 'Preferred Contact Method *',
    tooltip: 'Choose how you prefer to be contacted.',
    fields: [
      {
        label: 'Email',
        value: 'email',
        name: 'contactMethod',
        id: 'contact-method-email'
      },
      {
        label: 'Phone',
        value: 'phone',
        name: 'contactMethod',
        id: 'contact-method-phone'
      },
      {
        label: 'SMS',
        value: 'sms',
        name: 'contactMethod',
        id: 'contact-method-sms'
      }
    ]
  }
}