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" />


Table below contains all types of the props available in the ChoiceGroup component.

dataTeststringOptional prop for testing purposes.
idstringSet id for ChoiceGroup
childrenReact.Node (args) => React.NodeThe content of the ChoiceGroup, normally Radio or Checkbox. Pass a function for advanced usage, see “Render prop” in Storybook for an example.
errorTranslationThe error to display beneath the ChoiceGroup. Also, the Checkboxes/Radios will turn red when you pass some value.
labelTranslationHeading text of the ChoiceGroup
labelAsenum"h4"The element used to render the label into.
labelSizeenum"normal"The size type of Heading.
onChangeevent => void \| PromiseFunction for handling onChange event. See Functional specs
filterbooleanfalseChanges 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.
onlySelectionTextTranslationProperty for passing translation string when you want to use the onOnlySelection callback.



Passing a function as children

If you need more control over how to render ChoiceGroup, for example using react-window, you can pass a function to children instead of React.Node, which receives an object containing the following properties:

  • Container is the inner container where Radio/Checkbox elements are placed
  • Item is the component that should wrap Radio/Checkbox elements
  • spacing is the spacing between items, which you need to apply yourself

This is a barebones example:

<ChoiceGroup onChange={ev => doSomething(ev)}>
{({ Container, Item, spacing }) => (
<Container style={{ display: 'flex', flexDirection: 'column', gap: spacing }}>
<Radio label="Reason one" value="two">
<Radio label="Reason two" value="two">
<Radio label="Reason three" value="three">

For more realistic usage you can check out the “Render prop” example in Storybook.

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 return SyntheticEvent 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" />
  • onOnlySelection can be used only when filter prop is used.
  • filter pattern with onOnlySelection 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 with onOnlySelection shouldn’t contain radio buttons.