Radio

Radio buttons allow users to select a single option from a list of multiple options.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Radio } from '@adaptavant/eds-core';

Size​

Different size for the radio button.

{/* standard */}
<Radio label="Check me!" size="standard" />

{/* large */}
<Radio label="Check me!" size="large" />
View in Playroom

Disabled​

Whether the radio button is disabled or not.

{/* Checked */}
<Radio
  checked={true}
  isDisabled
  label="Check me!"
  size="standard"
/>

{/* Unchecked */}
<Radio
  checked={false}
  isDisabled
  label="Check me!"
  size="standard"
/>
View in Playroom

Controlled​

A controlled Radio component uses React’s state and a callback function to update the state.

Selected Option: 
  const options = [
    {
      label: "Apple",
      value: "apple",
    },
    {
      label: "Orange",
      value: "orange",
    },
    {
      label: "Mango",
      value: "mango",
    },
  ];
  const [selectedOption, setSelectedOption] = React.useState("");
  const handleChange = (e) => setSelectedOption(e.target.value);
  return (
    <Stack>
      {options.map((option) => (
        <Radio
          key={option.value}
          label={option.label}
          value={option.value}
          checked={selectedOption === option.value}
          onChange={handleChange}
        />
      ))}
      <Text className="text-body-12">Selected Option: {selectedOption}</Text>
    </Stack>
  );
View in Playroom

Uncontrolled​

An uncontrolled Radio component uses ref prop to access the current selected state. Additionally, you can maintain a React state to update other UI elements if needed

Selected Option: 
const options = [
    { label: "Apple", value: "apple" },
    { label: "Orange", value: "orange" },
    { label: "Mango", value: "mango" },
  ];
  const [selectedOption, setSelectedOption] = React.useState("");
  const radioGroupRef = React.useRef(null);

  const handleChange = () => {
    const selectedValue = radioGroupRef.current.querySelector(
      'input[name="fruit"]:checked'
    );
    setSelectedOption(selectedValue.value);
  };

  return (
    <Stack ref={radioGroupRef}>
      {options.map((option) => (
        <Radio
          key={option.value}
          label={option.label}
          value={option.value}
          name="fruit" // Ensure the same name for grouping
          onChange={handleChange}
        />
      ))}
      <Text className="text-body-12">Selected Option: {selectedOption}</Text>
    </Stack>
  );
View in Playroom

Radio Position​

Radio is placed at the start by default. Use radioPosition="start | end" prop to control the visual order of the checkbox and label.

This is a description
This is a description
<Radio
  label="Check me!"
  size="standard"
  name="placement"
  radioPosition="start"
  description="This is a description"
/>

<Radio
  label="Check me!"
  size="standard"
  name="placement"
  radioPosition="end"
  description="This is a description"
/>
View in Playroom

APIReference​

Radio

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Radio parts​

Inperson payments such as cash or card
<Radio
  label="Physical Payments Only"
  size="standard"
  value="value"
  description="Inperson payments such as cash or card"
  className="border border-input w-full p-2"
  classNames={{
    radioPrimitiveControl: "bg-critical",
    radioPrimitiveIcon:"fill-positive-hover",
    label: "text-positive",
    descriptionTrack: "gap-1",
    description: "text-positive-secondary",
    spacer: "h-6",
  }}
/>
View in Playroom
Stylable PartsDescription
rootThe root container of the radio button, wrapping all inner components.
labelThe text label associated with the radio.
descriptionTrackWrapper for the description text when it appears alongside the radio.
descriptionDescription text providing additional information about the radio.
spacerA spacer element used to create a gap between the description text and the start of the description track to maintain alignment for description text and label.
radioPrimitiveRootThe base container for the primitive radio button structure.
radioPrimitiveInputThe input element for the radio button, where the value is stored.
radioPrimitiveControlThe container for the control element, which visually represents the checked/unchecked state.
radioPrimitiveIconThe icon displayed within the radio when it is checked.