<Radios>

Skip past table of contents

Search

Table of contents

Start of documentation content

Displays checkboxes with fixed multichoice options.

Only <OptionRoot> is a valid child.

Use of <Radios>

<Radios

  id="myRadios"

  name="email"

  isRequired={false}

  labelHtml={{ en: 'Email' }}

  hintHtml={{ en: 'E.g. user@example.com' }}

  choosePromptHtml={{ en: 'Choose an email' }}

>

  <OptionRoot>

    <OptionGroup id="myGroup">

      <Option id="myOption1" />

      <Option id="myOption2" />

    </OptionGroup>

    <Option id="myOption3" />

  </OptionRoot>

</Radios>

Use of <Radios>

<Radios
  name="email"
  isRequired={false}
  labelHtml={{ en: 'Email' }}
  hintHtml={{ en: 'E.g. user@example.com' }}
  validationErrorRequiredHtml={{ en: 'Required' }}
  validationErrorInvalidHtml={{ en: 'Invalid' }}
  choosePromptHtml={{ en: 'Choose an email' }}
  showOptionHints={false}
>
  <OptionRoot>
    <OptionGroup labelHtml={{ en: 'North Island' }}>
      <Option labelHtml={{ en: 'Auckland' }} value="auckland" />
      <Option labelHtml={{ en: 'Wellington' }} value="wellington" />
    </OptionGroup>
    <Option labelHtml={{ en: 'Christchurch ' }} value="christchurch" />
  </OptionRoot>
</Radios>

For config of <OptionRoot>/<OptionGroup>/<Option> read their docs. <Select>, <Checkboxes> and <Radios> share the same options, making it easy to switch.

<Radios>'s props

PropAboutType
choosePromptHtml

Localisable HTML: When multichoice is displayed in a <select> this is the first <option> used as a placeholder value to prompt choosing an option.

Provide an empty string to bypass use this feature.

Any HTML will be removed when displayed using Formally's default renderer.

LocalisedHtml
hideInAnswerSummary

Whether to hide any answers below this.

boolean
hintHtml

Localisable HTML: Hint content

LocalisedHtml
isRequired

Whether users are required to fill in this form field.

This setting affects aria-required and whether a * is displayed next to the form field, etc.

boolean
labelHelpPopoutContentButtonLabel

Localisable text: Popout Content button label

LocalisedPlainText
labelHelpPopoutContentModalContentHtml

Localisable text: Popout Content modal title

LocalisedHtml
labelHelpPopoutContentModalHeadingHtml

Localisable text: Popout Content modal title

LocalisedHtml
labelHtml

Localisable HTML: Label content

LocalisedHtml
name

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

string
showOptionHints

Whether to display option hints.

In some cases (eg. <Select>) the hints may not be used, and/or may have HTML tags removed leaving PlainText.

boolean
tagsById

A list of tags for for this form field.

string[]
validationErrorInvalidHtml

Localisable HTML: invalid validation content

LocalisedHtml
validationErrorRequiredHtml

Localisable HTML: required validation content

LocalisedHtml
id

Component Id.

Must be unique within the form.

string
meta

Arbitrary metadata on this node.

This is useful when developing custom controls as it allows you to pass down metadata/extensions.

string
hasChildrenById

Non-editable.

Used to indicate that this component doesn't have children.

false
hasTagsById

Non-editable.

Used to indicate that this component has tags by id.

true
isFormField

Non-editable.

Used to indicate that this component is a form field.

true
isMultichoice

Non-editable.

Used to indicate that this component is a multichoice form field like <Select>, <Radios> or <Checkboxes>.

true
options

If used in React this is non-editable.

Only use this directly if constructing a document from JavaScript.

OptionNodes
pendingAttachments

Non-editable.

This is an Internal API that shouldn't be used by developers.

When using the SDK with JSX then React will useEffect components leaf-to-root, meaning that the parent node won't exist when the leaf is trying to attach itself.

So this is a queue of pending attachments by orphans listing the parents they want. Thankfully it's just data, tragedy averted.

{ from: string; to: string; }[]
type

Non-editable.

Type of component of "Radios".

"Radios"