Radio
Radio buttons allow users to select a single option from a list of multiple options.
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" />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"
/>Controlled
A controlled Radio component uses React’s state and a callback function to update the state.
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>
);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
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>
);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
<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",
}}
/>Stylable Parts | Description |
|---|---|
root | The root container of the radio button, wrapping all inner components. |
label | The text label associated with the radio. |
descriptionTrack | Wrapper for the description text when it appears alongside the radio. |
description | Description text providing additional information about the radio. |
spacer | A 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. |
radioPrimitiveRoot | The base container for the primitive radio button structure. |
radioPrimitiveInput | The input element for the radio button, where the value is stored. |
radioPrimitiveControl | The container for the control element, which visually represents the checked/unchecked state. |
radioPrimitiveIcon | The icon displayed within the radio when it is checked. |