Radio Group

Radio groups are used to group a set of radio buttons (options) together. They allow the user to select one option from a set.

Radio Group

Option 1

Option 2

Option 3

Option 4

---

Usage

import { RadioGroup } from "@newfold/ui-component-library";

const options = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
    { label: "Option 4", value: "4" },
];

const [selectedValue, setSelectedValue] = useState("");

<RadioGroup 
    id="radio-group-demo"
    label="Radio Group"
    value={selectedValue}
    options={options}
    onChange={setSelectedValue}
/>

---

Options

You can pass options to the radio group in two ways. Either as an array of objects or you can pass them as children using the RadioGroup.Radio sub-component.

1. Options as Array

Use the options prop to pass an array of options to the component. Each option must be an object with a string label and a string value property.

<RadioGroup 
    id="radio-group-array"
    value=""
    onChange={handleChange}
    options={[
        { label: "Option 1", value: "1" },
        { label: "Option 2", value: "2" },
        { label: "Option 3", value: "3" },
        { label: "Option 4", value: "4" },
    ]}
/>

info

If you want to have an option checked by default, you can pass the option's value to the value prop.

tip

Accessibility tip: if you need to provide a more descriptive label for screen readers, you can attach the optional property screenReaderLabel to each object in the options prop. See example below.

<RadioGroup 
    id="radio-group-array"
    value=""
    onChange={handleChange}
    options={[
        { label: "Option 1", value: "1", screenReaderLabel: "Option one" },
        { label: "Option 2", value: "2", screenReaderLabel: "Option two" },
        { label: "Option 3", value: "3", screenReaderLabel: "Option three" },
        { label: "Option 4", value: "4", screenReaderLabel: "Option four" },
    ]}
/>

2. Options as Children

You can pass options as children to the component. Each child must be an instance of RadioGroup.Radio sub-component.

<RadioGroup 
    id="radio-group-children"
    value=""
    name="radio-group-children"
    onChange={handleChange}
>
    <RadioGroup.Radio
      id="radio-group-child-1"
      label="Option 1"
      value="1"
    />
    <RadioGroup.Radio
      id="radio-group-child-2"
      label="Option 2"
      value="2"
    />
    <RadioGroup.Radio
      id="radio-group-child-3"
      label="Option 3"
      value="3"
    />
    <RadioGroup.Radio
      id="radio-group-child-4"
      label="Option 4"
      value="4"
    />
</RadioGroup>

info

The RadioGroup.Radio sub-component is an instance of the Radio component so it accepts the same props.

---

Label

Use the label prop to add a label to the RadioGroup component.

Select an Option

Option 1

Option 2

Option 3

Option 4

<RadioGroup 
    id="radio-group-label"
    label="Select an Option"
    value={selectedValue}
    options={options}
    onChange={setSelectedValue}
/>

---

Description

Use the description prop to add a description to the RadioGroup component.

Select an Option

This is a description of the radio group

Option 1

Option 2

Option 3

Option 4

<RadioGroup 
    id="radio-group-description"
    label="Select an Option"
    description="This is a description of the radio group"
    value={selectedValue}
    options={options}
    onChange={setSelectedValue}
/>

---

Disabled

Use the disabled prop to disable the RadioGroup component.

Select an Option

Option 1

Option 2

Option 3

Option 4

<RadioGroup 
    id="radio-group-disabled"
    label="Select an Option"
    value={selectedValue}
    options={options}
    onChange={setSelectedValue}
    disabled={true}
/>

---

Variants

The RadioGroup component offers two variants: default and inline-block.

1. Default (default)

The default variant renders classic radio elements.

Default Variant

Option 1

Option 2

Option 3

Option 4

<RadioGroup 
    id="radio-group-default"
    label="Default Variant"
    value={selectedValue}
    options={options}
    onChange={setSelectedValue}
    variant="default"
/>

2. Inline Block

The inline-block variant renders button shaped radio elements.

Inline Block Variant

Option 1

Option 2

Option 3

Option 4

<RadioGroup 
    id="radio-group-inline-block"
    label="Inline Block Variant"
    value={selectedValue}
    options={options}
    onChange={setSelectedValue}
    variant="inline-block"
/>

---

Props

Attribute	Type	Description	Default
id	string |	-	-
name	string |	-	-
value	string |	The value of the selected radio option.	-
label	string |	-	-
description	string |	-	-
options	[{ value: string, label: string, screenReaderLabel: string }] |	value (required) | label (required) | screenReaderLabel (optional).	-
variant	default | inline-block |	Variant of the radio button	default
onChange	function |	Callback function when radio button is clicked. Receives the new value as a parameter.	-
children	node |	-	-
disabled	bool |	-	false
className	string |	-	-