Radio 10.17.4

ARIA

RTL

Radio buttons are used to represent a group of choices whereby users can only select one option.

The main difference between the radio button and the checkbox is, users are allowed to select single options whereas in the checkbox you can have multiple options.

Based on Headless UI.

Anatomy

<Radio>
  <Radio.Option>
    <Radio.Indicator />
    ...
  </Radio.Option>
</Radio>

Default

The <Radio /> component serves as a container for <Radio.Option /> sub-components, each representing a distinct option. To assign a label to an option, include it within <Radio.Option />. By default, no option is preselected.

"use client";

import { Radio } from "@heathmont/moon-core-tw";
import { useState } from "react";

const Default = () => {
  const [value, setValue] = useState("");
  return (
    <Radio value={value} onChange={setValue}>
      <Radio.Option value="option1">
        <Radio.Indicator />
      </Radio.Option>
      <Radio.Option value="option2">
        <Radio.Indicator />
      </Radio.Option>
    </Radio>
  );
};

export default Default;

Uncontrolled

Control the <Radio /> using the defaultValue property.

Option 1

Option 2

"use client";

import { Radio } from "@heathmont/moon-core-tw";

const Uncontrolled = () => (
  <Radio defaultValue="option2">
    <Radio.Option value="option1">
      <Radio.Indicator />
      Option 1
    </Radio.Option>
    <Radio.Option value="option2">
      <Radio.Indicator />
      Option 2
    </Radio.Option>
  </Radio>
);

export default Uncontrolled;

Disabled

Disable the entire <Radio /> component or an individual <Radio.Option /> by applying the disabled property to the relevant component.

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

"use client";

import { Radio } from "@heathmont/moon-core-tw";
import { useState } from "react";

const Disabled = () => {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");

  return (
    <>
      <Radio value={value1} onChange={setValue1}>
        <Radio.Option value="option1">
          <Radio.Indicator />
          Option 1
        </Radio.Option>
        <Radio.Option value="option2">
          <Radio.Indicator />
          Option 2
        </Radio.Option>
        <Radio.Option value="option3" disabled>
          <Radio.Indicator />
          Option 3
        </Radio.Option>
      </Radio>

      <Radio value={value2} onChange={setValue2} disabled>
        <Radio.Option value="option1">
          <Radio.Indicator />
          Option 1
        </Radio.Option>
        <Radio.Option value="option2">
          <Radio.Indicator />
          Option 2
        </Radio.Option>
        <Radio.Option value="option3">
          <Radio.Indicator />
          Option 3
        </Radio.Option>
      </Radio>
    </>
  );
};

export default Disabled;

As form item

To integrate the <Radio /> component as a form item, add the name property. Data transfer occurs through a hidden <input /> tag.

Option 1

Option 2

"use client";

import { Radio } from "@heathmont/moon-core-tw";
import { useState } from "react";

const AsFormItem = () => {
  const [value, setValue] = useState("");
  return (
    <Radio value={value} onChange={setValue} name="Form Item">
      <Radio.Option value="option1">
        <Radio.Indicator />
        Option 1
      </Radio.Option>
      <Radio.Option value="option2">
        <Radio.Indicator />
        Option 2
      </Radio.Option>
    </Radio>
  );
};

export default AsFormItem;

Customization

Enhance the <Radio /> component and its sub-components by using the className property. You can modify the label placement and apply any custom styles to both <Radio.Option /> and <Radio.Indicator />.

For specific adjustments to the <Radio.Indicator />, use the moon-checked and after selectors. See the examples below for guidance.

Customized Option 1

Customized Option 2

Customized Indicator 1

Customized Indicator 2

Horizontal Option 1

Horizontal Option 2

Top Label Option 1

Top Label Option 2

"use client";

import { Radio } from "@heathmont/moon-core-tw";
import { useState } from "react";

const Customization = () => {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  const [value3, setValue3] = useState("");
  const [value4, setValue4] = useState("");

  return (
    <div className="flex flex-col gap-6 items-center">
      <Radio value={value1} onChange={setValue1}>
        <Radio.Option
          value="option1"
          className="w-48 p-2 justify-between hover:bg-gohan transition-colors rounded-moon-i-sm"
        >
          Customized Option 1
          <Radio.Indicator />
        </Radio.Option>
        <Radio.Option
          value="option2"
          className="w-48 p-2 justify-between hover:bg-gohan transition-colors rounded-moon-i-sm"
        >
          Customized Option 2
          <Radio.Indicator />
        </Radio.Option>
      </Radio>

      <Radio value={value2} onChange={setValue2}>
        <Radio.Option value="option1">
          <Radio.Indicator className="border-chichi" />
          Customized Indicator 1
        </Radio.Option>
        <Radio.Option value="option2">
          <Radio.Indicator className="moon-checked:border-nappa after:bg-nappa" />
          Customized Indicator 2
        </Radio.Option>
      </Radio>

      <Radio value={value3} onChange={setValue3} className="flex gap-4">
        <Radio.Option value="option1">
          <Radio.Indicator />
          Horizontal Option 1
        </Radio.Option>
        <Radio.Option value="option2">
          <Radio.Indicator />
          Horizontal Option 2
        </Radio.Option>
      </Radio>

      <Radio value={value4} onChange={setValue4} className="flex gap-4">
        <Radio.Option
          value="option1"
          className="flex flex-col items-center gap-0"
        >
          Top Label Option 1
          <Radio.Indicator />
        </Radio.Option>
        <Radio.Option
          value="option2"
          className="flex flex-col items-center gap-0"
        >
          Top Label Option 2
          <Radio.Indicator />
        </Radio.Option>
      </Radio>
    </div>
  );
};

export default Customization;

Radio

These are props specific to the Radio component:

Name	Type	Default
children	"React.ReactNode"	-
className	string	-
defaultValue	string \| number	-
disabled	boolean	-
name	string \| number	-
setValue	"any"	-
value	string \| number	-

Radio.Option

These are props specific to the Radio.Option component:

Name	Type	Default
children	"React.ReactNode"	-
className	string	-
disabled	boolean	-
value	string \| number	-

Radio.Indicator

These are props specific to the Radio.Indicator component:

Name	Type	Default
className	string	-