Radio Group

For wrapping radio buttons with a label and help text

Setting Selection

Select a setting from the menu below:

import { Radio, RadioGroup } from "@nulogy/components";

<RadioGroup
  labelText="Setting Selection"
  name="settingSelection"
  helpText="Select a setting from the menu below:"
>
  <Radio value="a" labelText="Option A" />
  <Radio value="b" labelText="Option B" />
  <Radio value="c" labelText="Option C" />
</RadioGroup>

Variations

With an error

Setting Selection

Select a setting from the menu below:

Please select an option

import { Radio, RadioGroup } from "@nulogy/components";

<RadioGroup
  labelText="Setting Selection"
  name="settingSelection"
  helpText="Select a setting from the menu below:"
  errorMessage="Please select an option"
>
  <Radio value="a" labelText="Option A" />
  <Radio value="b" labelText="Option B" />
  <Radio value="c" labelText="Option C" />
</RadioGroup>

Props

NameTypeDefaultDescription

name

String

Required

A unique name for this input that groups inputs together

defaultValue

String

null

A value to autoselect on pageload

errorMessage

String

null

Displays list of error messages and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

helpText

String

null

Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.

labelText

String

Required

Informs users what the corresponding input field is for.

required

Boolean

false

Makes the field require selection before the form will submit.

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the group wrapper.

Related components