Radio

General

Radio
Used to select a single state from multiple options.

Show Code

import React from "react"; 
import Radio from "pocko-ui/Radio";
 
function getOptionsChange(val: any, e: any, label: any, index: any) {
  console.log(val, e.target, label, index);
}
 
return (
  <div className="mt-4">
    <Radio
      id="radio1"
      name="radio-1"
      value="value-2"
      options={[
        { label: "Option 1", value: "value-1" },
        {
          label: "<del style=color:red>deprecate</del>Option 2",
          value: "value-2",
        },
        {
          label: "Option 3",
          value: "value-3",
          customAttr1: "attr1",
          customAttr2: "attr2",
        },
      ]}
      onChange={getOptionsChange}
    />
 
    <Radio
      id="radio2"
      name="radio-2"
      value="value-2"
      options={[
        { label: "Option 1", value: "value-1" },
        {
          label: "<del style=color:red>deprecate</del>Option 2",
          value: "value-2",
        },
        {
          label: "Option 3",
          value: "value-3",
          customAttr1: "attr1",
          customAttr2: "attr2",
        },
      ]}
      onChange={getOptionsChange}
      wrapperClassName="d-flex align-items-center gap-2"
    />
 
    <Radio
      id="radio3"
      name="radio-3"
      value="value-1"
      options={[
        { label: "Option 1", value: "value-1" },
        {
          label: "<del style=color:red>deprecate</del>Option 2",
          value: "value-2",
        },
        {
          label: "Option 3",
          value: "value-3",
          customAttr1: "attr1",
          customAttr2: "attr2",
          disabled: true,
        },
      ]}
      onChange={getOptionsChange}
      wrapperClassName="d-flex align-items-center gap-2"
    />
  </div>
);

Using contentRef to Control the Radio Component

Option 1

~~deprecate~~Option 2

Option 3

Show Code

 
import React from "react"; 
import Radio from "pocko-ui/Radio";
 
const radioRef = useRef<any>(null);
 
function getOptionsChange(val: any, e: any, label: any, index: any) {
  console.log(val, e.target, label, index);
}
 
const handleSetCheckbox = () => {
  radioRef.current.set("value-1");
};
 
const handleClearCheckbox = () => {
  radioRef.current.clear();
};
 
return (
  <div className="mt-4">
    <Radio
      contentRef={radioRef}
      id="radio1"
      name="radio-1"
      value="value-2"
      options={[
        { label: "Option 1", value: "value-1" },
        {
          label: "<del style=color:red>deprecate</del>Option 2",
          value: "value-2",
        },
        {
          label: "Option 3",
          value: "value-3",
          customAttr1: "attr1",
          customAttr2: "attr2",
        },
      ]}
      onChange={getOptionsChange}
    />
 
    <button
      type="button"
      className="btn btn-sm btn-warning me-2"
      onClick={handleSetCheckbox}
    >
      Check the First Radio
    </button>
 
    <button
      type="button"
      className="btn btn-sm btn-danger text-dark"
      onClick={handleClearCheckbox}
    >
      Uncheck Radio
    </button>
  </div>
);

API

Radio

import Radio from "pocko-ui/Radio";

Property	Type	Default	Description	Required
`contentRef`	React.ForwardedRef	-	Allows external components to control the radio button's state (e.g., clearing, setting values, etc.).	-
`wrapperClassName`	string	-	Custom class name for the control wrapper.	-
`formCheckClassName`	string	-	Custom class name for the form check container.	-
`formCheckLableClassName`	string	-	Custom class name for the label associated with the radio button.	-
`options`	OptionConfig[] \| string \| unknown	-	Array of options to render, each with a `value`, `label`, and optional `disabled` property.	-
`value`	string	-	The value of the selected radio button.	✔
`id`	string \| number \| any	-	The `id` of the control, used for associating the radio button with its label.	-
`name`	string \| any`	-	The `name` attribute of the radio button group.	-
`onChange`	(arg_1: any, arg_2: any, arg_3?: any, arg_4?: any) => void	-	Callback function triggered when the radio button state changes. Returns the selected value, event, label, and index.	-

Installation