Radio

Radio buttons are a type of input element that allows users to select only one option from a list of mutually exclusive options. They are commonly used in forms where users need to select one option from a set of options.

I am a radio button.

---

Usage

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

<Radio
    id="radio"
    label="I am a radio button."
    name="name"
    value="value"
/>

---

Variants

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

1. Default (default)

The default radio variant renders a classic radio element.

Radio button with default variant.

<Radio
    id="radio-default"
    label="Radio button with default variant."
    name="option-default"
    value="1"
/>

2. Inline Block

The inline-block variant renders a button shaped radio element.

2

<Radio
    id="radio-inline-block"
    label="2"
    name="option-inline-block"
    value="2"
    variant="inline-block"
    screenReaderLabel="Option #2"
/>

tip

Accessibility tip: when using the inline-block variant, it is recommended to pass a meaningful label name to the screenReaderLabel prop. See the example in the code snippet above.

---

Disabled

Use the disabled prop to disable the radio button.

I am a radio button.

<Radio
    id="radio-disabled"
    label="I am a radio button."
    name="name"
    value="disabled-radio"
    disabled
/>

// The 'Dangerous label' doc is disabled due to a bug in the rendering of the Label element. // Ref: https://github.com/newfold-labs/npm-ui-component-library/issues/27 //--- //### Dangerous label //If you need to render dangerous HTML inside the label, use the isLabelDangerousHtml prop. // //

// <Radio // id="radio-dangerous" // isLabelDangerousHtml={false} // label="• Dangerous label." // name="option-dangerous" // value="D" // /> //

// //jsx //<Radio // id="radio-dangerous" // isLabelDangerousHtml // label="&bull; Dangerous label." // name="option-dangerous" // value="dangerous-radio" ///> //

---

Radio Group

Use the RadioGroup component to render a list of radio options.

---

Props

Attribute	Type	Description	Default
id*	string |	-	-
name*	string |	-	-
value*	string |	-	-
label*	string |	-	-
variant	default | inline-block |	Variant of the radio button	default
isLabelDangerousHtml	bool |	If true, the label will be rendered as HTML	false
screenReaderLabel	string |	Label for screen readers	-
disabled	bool |	-	false
className	string |	-	-