ChoiceGroup / React
Organizes checkboxes or radio buttons into a single related group.
To implement ChoiceGroup component into your project you’ll need to add the import:
import ChoiceGroup from "@kiwicom/orbit-components/lib/ChoiceGroup";
import Radio from "@kiwicom/orbit-components/lib/Radio";
After adding import into your project you can use it simply like:
<ChoiceGroup label="What was the reason for your cancellation?">
<Radio label="Reason one" value="one" />
<Radio label="Reason two" value="two" />
<Radio label="Reason three" value="three" />
</ChoiceGroup>
Props
Table below contains all types of the props available in the ChoiceGroup component.
Name | Type | Default | Description |
---|---|---|---|
dataTest | string |
Optional prop for testing purposes. | |
children | React.Node |
The content of the ChoiceGroup, normally Radio or Checkbox | |
error | Translation |
The error to display beneath the ChoiceGroup. Also, the Checkboxes/Radios will turn red when you pass some value. | |
label | Translation |
Heading text of the ChoiceGroup | |
labelAs | enum |
"h4" |
The element used to render the label into. |
labelSize | enum |
"normal" |
The size type of Heading. |
onChange | event => void | Promise |
Function for handling onChange event. See Functional specs | |
filter | boolean |
false |
Changes visual appearance of child components, to contain background on hover and updates padding. |
onOnlySelection | (event, {value: string, label: string}) => void | Promise<any> |
Function for handling onOnlySelection, read more in Functional specs. | |
onlySelectionText | Translation |
Property for passing translation string when you want to use the onOnlySelection callback. |
enum
labelElement | labelSize |
---|---|
"h2" |
"normal" |
"h3" |
"large" |
"h4" |
|
"h5" |
|
"h6" |
Functional specs
- onChange props in
<Radio />
or<Checkbox />
will be overrode by internal onChange function - If you want to handle selecting field, pass
onChange
to<ChoiceGroup />
and it will be always triggered when<Radio />
or<Checkbox />
should change onChange
will returnSyntheticEvent
of field that should change
<ChoiceGroup onChange={ev => doSomething(ev)}>
<Radio label="Reason one" value="one" />
<Radio label="Reason two" value="two" />
<Radio label="Reason three" value="three" />
</ChoiceGroup>
onOnlySelection
can be used only whenfilter
prop is used.filter
pattern withonOnlySelection
is used where multiple checkboxes in different states are presented to the user, and the user wants to choose only one of them.filter
pattern withonOnlySelection
shouldn’t contain radio buttons.