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

API Reference​

Radio​

PropTypeDescriptionDefault
labelReactNodeLabel for the radio button, typically required for accessibility purposes._
isDisabled?booleanWhen true, the radio will be announced as disabled to screen readers and styled to signify this.false
size?'standard'| 'large'The size of the radio.standard
value?stringThe value of the radio button._
checked?booleanIndicates whether the radio is checked, used in controlled components._
id?stringA unique ID for the radio button._
name?booleanThe name attribute of the radio, useful for grouping in forms._
description?ReactNodeDescription text displayed alongside the radio, providing additional context._
aria-describedby?stringDefines the ID of the element that provides additional information about the radio for accessibility purposes._
onBlur?functionEvent handler for when the radio loses focus._
onClick?functionEvent handler for when the radio is clicked._
onChange?functionFunction called when the radio value changes._
radioPosition'start' | 'end'Position the radio component with respect to Labelstart

Note: For id and aria-describedBy if a value is provided, the IDs will be merged. Otherwise, React.useId will be used to generate unique IDs to associate the labels appropriately.

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.