Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

radio-button-group

v1.9.0arrow_drop_down
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
12
VISIBILITY
Public
PUBLISHED
2 weeks ago
SIZE
22 KB
A button list that can have a single entry checked at any one time.
1 contributor
Use radio-button-group in your project ?
Copied
npm i @bit/nexxtway.react-rainbow.radio-button-group
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
chevron_left
chevron_right
radiobuttongroup base
import React from 'react';
import { RadioButtonGroup } from 'react-rainbow-components';

const options = [
    { value: 'off', label: 'Off' },
    { value: 'parking', label: 'Parking' },
    { value: 'auto', label: 'Auto' },
    { value: 'on', label: 'On' },
];

class SimpleRadioButtonGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'auto',
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        return (
            <RadioButtonGroup
                id="radio-button-group-component-1"
                options={options}
                value={this.state.value}
                onChange={this.handleOnChange}
            />
        );
    }
}

<div className="rainbow-p-around_x-large rainbow-align-content_center">
    <SimpleRadioButtonGroup />
</div>
radiobuttongroup brand with label
import React from 'react';
import { RadioButtonGroup } from 'react-rainbow-components';

const options = [
    { value: 'off', label: 'Off' },
    { value: 'parking', label: 'Parking' },
    { value: 'auto', label: 'Auto' },
    { value: 'on', label: 'On' },
];

class LabeledBrandRadioButtonGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'auto',
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        return (
            <RadioButtonGroup
                id="radio-button-group-component-1"
                options={options}
                value={this.state.value}
                variant="brand"
                onChange={this.handleOnChange}
                label="RadioButtonGroup Label"
            />
        );
    }
}

<div className="rainbow-p-around_x-large rainbow-align-content_center">
    <LabeledBrandRadioButtonGroup />
</div>
radiobuttongroup inverse
import React from 'react';
import { RadioButtonGroup } from 'react-rainbow-components';

const options = [
    { value: 'off', label: 'Off' },
    { value: 'parking', label: 'Parking' },
    { value: 'auto', label: 'Auto' },
    { value: 'on', label: 'On' },
];

const buttonsContainerStyles = {
    backgroundColor: '#061c3f',
    borderRadius: '0.875rem',
};

class RadioButtonGroupInverse extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'auto',
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        return (
            <RadioButtonGroup
                id="radio-button-group-component-1"
                options={options}
                value={this.state.value}
                variant="inverse"
                onChange={this.handleOnChange}
            />
        );
    }
}

<div
    className="rainbow-p-around_x-large rainbow-align-content_center"
    style={buttonsContainerStyles}
>
    <RadioButtonGroupInverse />
</div>
radiobuttongroup disabled
import React from 'react';
import { RadioButtonGroup } from 'react-rainbow-components';

const options = [
    { value: 'off', label: 'Off', disabled: true },
    { value: 'parking', label: 'Parking', disabled: true },
    { value: 'auto', label: 'Auto', disabled: true },
    { value: 'on', label: 'On', disabled: true },
];

class DisabledRadioButtonGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'user',
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        return (
            <RadioButtonGroup
                options={options}
                value={this.state.value}
                onChange={this.handleOnChange}
                label="RadioButtonGroup Label"
            />
        );
    }
}

<div className="rainbow-p-around_x-large rainbow-align-content_center">
    <DisabledRadioButtonGroup />
</div>
radiobuttongroup required
import React from 'react';
import { RadioButtonGroup } from 'react-rainbow-components';

const options = [
    { value: 'off', label: 'Off' },
    { value: 'parking', label: 'Parking' },
    { value: 'auto', label: 'Auto' },
    { value: 'on', label: 'On' },
];

class RequiredRadioButtonGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: undefined,
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        return (
            <RadioButtonGroup
                options={options}
                value={this.state.value}
                onChange={this.handleOnChange}
                label="RadioButtonGroup Label"
                required
            />
        );
    }
}

<div className="rainbow-p-around_x-large rainbow-align-content_center">
    <RequiredRadioButtonGroup />
</div>
radiobutton group error
import React from 'react';
import { RadioButtonGroup } from 'react-rainbow-components';

const options = [
    { value: 'off', label: 'Off' },
    { value: 'parking', label: 'Parking' },
    { value: 'auto', label: 'Auto' },
    { value: 'on', label: 'On' },
];

class ErrorRadioButtonGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'anonymous',
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        return (
            <RadioButtonGroup
                options={options}
                value={this.state.value}
                onChange={this.handleOnChange}
                label="RadioButtonGroup Label"
                error="This field is required"
            />
        );
    }
}

<div className="rainbow-p-around_x-large rainbow-align-content_center">
    <ErrorRadioButtonGroup />
</div>
Properties
NameTypeDefault valueDescription
label
string | nodenull

The radio group label

name
stringnull

The name of the radio group

value
stringundefined

The value of the element.

variant
'default' | 'inverse' | 'brand''default'

The variant changes the appearance of the radio button. Accepted variants include default, brand and inverse. This value defaults to default.

onChange
function() => {}

The action triggered when a value attribute changes.

required
boolfalse

If is set to true the radio group is required. This value defaults to false.

options
{"label":"string | node","value":"string","disabled":"bool"}[][]

An array with the radio options.

error
string | nodenull

Specifies that an radio group must be filled out before submitting the form.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied for the outer element.

id
stringundefined

The id of the outer element.

style
objectundefined
isVisible
anyfalse
label
node
value
stringundefined
onChange
function() => {}
ariaDescribedby
stringundefined
disabled
boolfalse
isChecked
boolfalse
name
stringundefined
required
bool
itemRef
object