RadioGroup

For wrapping radio buttons with a label and help text.

checkedValue

children


      <Radio value="a" labelText="Option A" />
      <Radio value="b" labelText="Option B" />
      <Radio value="c" labelText="Option C" />


      <Radio value="a" labelText="Option A" />
      <Radio value="b" labelText="Option B" />
      <Radio value="c" labelText="Option C" />

name

defaultValue

errorMessage

errorList

helpText

labelText

required

disabled

requirementText

className

import * as React from "react";
import { RadioGroup, Radio } from "@nulogy/components";

export default () => {
  return (
    <RadioGroup
      checkedValue="a"
      name="settingSelection"
      helpText="Select a setting from the menu below:"
      labelText="Setting Selection"
    >
      <Radio value="a" labelText="Option A" />
      <Radio value="b" labelText="Option B" />
      <Radio value="c" labelText="Option C" />
    </RadioGroup>
  );
}

import * as React from "react";
import { RadioGroup, Radio } from "@nulogy/components";

export default () => {
  return (
    <RadioGroup
      checkedValue="a"
      name="settingSelection"
      helpText="Select a setting from the menu below:"
      labelText="Setting Selection"
    >
      <Radio value="a" labelText="Option A" />
      <Radio value="b" labelText="Option B" />
      <Radio value="c" labelText="Option C" />
    </RadioGroup>
  );
}

Props

Name	Type	Default	Description
checkedValue	string		The selected value within the group
children	react node		Inner content.
name	string		A unique name for this input that groups inputs together
defaultValue	string		A value to autoselect on pageload
errorMessage	string		Displays list of error messages and applies red style
errorList	array		Displays list of error messages and applies red style
helpText	string		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		Informs users what the corresponding input field is for.
required	boolean	false	Makes the field require selection before the form will submit.
disabled	boolean	false	Marks the entire group as disabled and unable to be toggled.
requirementText	string		(Optional) or (Required).
className	string		className passed to the group wrapper.

RadioGroup

Props

Related Components