RadioButtonGroup - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <RadioRadioButtonGroup /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/RadioButtonGroup and @zippytech/react-toolkit/RadioButtonGroup/index.css.
This is the most basic setup for a <RadioRadioButtonGroup />. In the following sections we'll explore how to use the <RadioRadioButtonGroup /> in various scenarios, styles and supported props.
You can use the stretch prop to stretch the radio buttons along the available space.
You can also stretch them vertically, combining stretch with orientation.
When you click on one of the group's option, the onChange callback will be called, having the selected item's label, value and index as arguments.
By default, the radio buton group has keyboard navigation, allowing you to navigate between the buttons. You can change this by setting enableKeyboardNavigation to false.
The <RadioRadioButtonGroup /> must be focused in order for the keyboard navigation to work.