<OptionRoot>, <OptionGroup>, and <Option>

Search

Table of contents

The <Select>, <Radios> and <Checkboxes> share the same option components.

This makes it easy to change. If you used <Radios> but then decided to allow multiple selections it would be easy to swap to <Checkboxes>.

Intro

The multichoice <Select> and <Radios> and <Checkboxes> must only have a single child component of <OptionRoot>.

The <OptionRoot> may contain multiple <OptionGroup>s and <Option>s.

The <OptionGroup> may only contain multiple <Option>s, but no other component.

Use of multichoice options

<OptionRoot>
  <OptionGroup>
    <Option />
    <Option />
  </OptionGroup>
  <Option />
  <Option />
  <Option />
</OptionRoot>

<OptionRoot>

The first and only child of <Select>, <Radios> or <Checkboxes> must be a single <OptionRoot>.

Valid children of <OptionRoot> are multiple <OptionGroup>s and <Option>s.

Use of <OptionRoot>

<OptionRoot>
  <OptionGroup /> or <Option />
</OptionRoot>

<OptionRoot>'s props

PropAboutType
id

Component Id.

Must be unique within the form.

string
childrenById

Used to indicate the ids of children.

If used in React this is non-editable.

string[]
hasChildrenById

Non-editable.

Used to indicate that this component has children.

true
isFormField

Non-editable.

Used to indicate that this component isn't a form field.

(form fields have labels and hints, this doesn't)

false
type

Non-editable.

Type of component of "OptionRoot".

"OptionRoot"

<OptionGroup>

Groups sets of <Option>s.

This component may only be used as a child of <OptionRoot>, and may not be nested.

The only valid children are multiple <Option>s.

In a <Select> a <OptionGroup> would be rendered as an <optgroup> (MDN <optgroup>).

In <Checkboxes> and <Radios> this would be rendered as a <fieldset> (MDN <fieldset>).

Use of <OptionGroup>

<OptionGroup
  labelHtml={{ en: 'South Island', mi: 'Te Waipounamu }}
  hintHtml={{ en: '' }}
/>

<OptionGroup>'s props

PropAboutType
hintHtml

Localisable HTML: Hint content.

Note: If used in a <select> <optgroup> the hint may be ignored.

LocalisedHtml
labelHtml

Localisable HTML: Option Group title content.

Note that HTML might not be available if rendered as an <optgroup> in a <select>. In an <optgroup> The HTML will have tags striped, leaving plaintext.

If a developer requires HTML in a <select> then non-native controls would have to be used. See the controls prop and replace the <Select>.

HTML will be used in <Radios> and <Checkboxes>.

LocalisedHtml
id

Component Id.

Must be unique within the form.

string
childrenById

Used to indicate the ids of children.

If used in React this is non-editable.

string[]
hasChildrenById

Non-editable.

Used to indicate that this component has children.

true
isFormField

Non-editable.

Used to indicate that this component is a form field.

true
type

Non-editable.

Type of component of "OptionGroup".

"OptionGroup"

<Option>

An option that a user can choose.

In a <Select> this would be rendered as an <option>.

In <Checkboxes> these would be rendered as a checkbox field, and in <Radios> these would be a radio field.

Use of <Option>

<Option
  labelHtml={{ en: 'Green' }}
  hintHtml={{ en: 'E.g. #00ff00' }}
  value="green"
/>

<Option>'s props

PropAboutType
hintHtml

Localisable HTML: Hint content.

Note: If used in a <select>'s <option> it may be ignored

LocalisedHtml
labelHtml

Localisable HTML: Label content.

Note: If used in a <select>'s <option> then HTML tags may be stripped leaving plaintext.

LocalisedHtml
value

The 'value' attribute of the <option> or checkbox/radio <input>.

Typically not displayed to the user.

string
id

Component Id.

Must be unique within the form.

string
hasChildrenById

Non-editable.

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

false
isFormField

Non-editable.

Used to indicate that this component is part of a form field.

true
type

Non-editable.

Type of component of "Option".

"Option"