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







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
Prop | About | Type |
---|---|---|
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" |
<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
Prop | About | Type |
---|---|---|
hintHtml | Localisable HTML: Hint content. Note: If used in a | LocalisedHtml |
labelHtml | Localisable HTML: Option Group title content. Note that HTML might not be available if rendered
as an If a developer requires HTML in a HTML will be used in | 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" |
<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
Prop | About | Type |
---|---|---|
hintHtml | Localisable HTML: Hint content. Note: If used in a | LocalisedHtml |
labelHtml | Localisable HTML: Label content. Note: If used in a | LocalisedHtml |
value | The 'value' attribute of the 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" |