Nocturnal Pumpkin Maelstrom

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-radio-group package

    3.0.3 • Public • Published


    npm install react-radio-group

    Then either import {RadioGroup, Radio} from 'react-radio-group' or add node_modules/react-radio-group/umd/index.js into your HTML file (exports the RadioGroup global which contains both, the RadioGroup and Radio component.).

    What This Solves

    This is your average radio buttons group:

      <input type="radio" name="fruit" value="apple" />Apple
      <input type="radio" name="fruit" value="orange" />Orange
      <input type="radio" name="fruit" value="watermelon" />Watermelon

    A few problems:

    • Repetitive fields (name, type, checked, onChange).
    • Hard to set the checked value. You need to put e.g. checked={'apple' === this.state.selectedFruitName} on every input.
    • Hard to retrieve the selected value.

    Here's a better version (full example here)

    <RadioGroup name="fruit" selectedValue={this.state.selectedValue} onChange={this.handleChange}>
      <Radio value="apple" />Apple
      <Radio value="orange" />Orange
      <Radio value="watermelon" />Watermelon

    Repetitive fields are either lifted onto the RadioGroup wrapper or already implicitly set on the Radio component, which is a simple wrapper around the radio input.

    Formal API

    <RadioGroup />

    Exposes 5 optional props:

    • name: String: what you'd normally put on the radio inputs themselves.
    • selectedValue: String | Number | Boolean: the currently selected value. This will be used to compare against the values on the Radio components to select the right one.
    • onChange: Function: will be passed the newly selected value.
    • Component: String | React Component: defaults to "div", defines what tag or component is used for rendering the RadioGroup
    • children: Node: define your Radios and any other components. Each Radio component (a thin wrapper around input) within a RadioGroup will have some fields like type, name and checked prefilled.

    <Radio />

    Any prop you pass onto it will be transferred to the actual input under the hood. Radio components cannot be used outside a RadioGroup




    npm i react-radio-group

    DownloadsWeekly Downloads






    Unpacked Size

    59.1 kB

    Total Files


    Last publish


    • chenglou
    • danielberndt
    • jergason
    • nkbt