NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

ToggleSwitch

import ToggleSwitch from '@concur/nui-widgets/lib/ToggleSwitch/ToggleSwitch';

Toggle switches allow the user to choose between two or more options and behave essentially the same as radio buttons (and in fact are simply restyled radio buttons). Only one option can be active at a time.

Examples

Sizes

There are three supported sizes: 'lg' (default), 'md' and 'sm'. Use the size property to set the size.

class HIGToggleSwitchEx01 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            valueLg: '1',
            valueMd: '1',
            valueSm: '1'
        };
        this._onChange = this._onChange.bind(this);
    }

    _onChange(name, value) {
        this.setState({
            [name]: value
        });
    }

    render() {
        return (
            <div className='row'>
                <div className='col-xs-12 col-sm-9 col-md-6'>
                    <ToggleSwitch
                        name='toggleLg'
                        onChange={this._onChange.bind(this, 'valueLg')}
                        value={this.state.valueLg}>
                        <ToggleSwitch.Option value='1'>Option One</ToggleSwitch.Option>
                        <ToggleSwitch.Option value='2'>Option Two</ToggleSwitch.Option>
                        <ToggleSwitch.Option value='3'>Option Three</ToggleSwitch.Option>
                    </ToggleSwitch>
                    <br />
                    <ToggleSwitch
                        name='toggleMd'
                        onChange={this._onChange.bind(this, 'valueMd')}
                        size='md'
                        value={this.state.valueMd}>
                        <ToggleSwitch.Option value='1'>Option One</ToggleSwitch.Option>
                        <ToggleSwitch.Option value='2'>Option Two</ToggleSwitch.Option>
                        <ToggleSwitch.Option value='3'>Option Three</ToggleSwitch.Option>
                    </ToggleSwitch>
                    <br />
                    <ToggleSwitch
                        name='toggleSm'
                        onChange={this._onChange.bind(this, 'valueSm')}
                        size='sm'
                        value={this.state.valueSm}>
                        <ToggleSwitch.Option value='1'>Option One</ToggleSwitch.Option>
                        <ToggleSwitch.Option value='2'>Option Two</ToggleSwitch.Option>
                        <ToggleSwitch.Option value='3'>Option Three</ToggleSwitch.Option>
                    </ToggleSwitch>
                </div>
            </div>
        );
    }
}

Disabled State

Disabled is not a currently supported state for the ToggleSwitch component.

ReadOnly State

ReadOnly is not a supported state for the ToggleSwitch component.

Usage

ToggleSwitch

Properties

Property Type Default Description
name String Required Adds the name attribute to the <input type="radio"> elements with the specified value.
children Node   Collection of React components to be placed in the radio button wrapper. Must be one or more ToggleSwitch.Option components.
className String   Custom classes to be added to the <div> element that wraps the <input type="radio"> elements.
size String 'lg' Toggle switch size. Options are 'lg', 'md', 'sm'.
value String   Value of the selected option.

Callbacks

Property Parameters Description
onChange value, event Fires when the selection changes.

ToggleSwitch.Option

Properties

Property Type Default Description
children Node   Content of the option’s label element
value String   Value of this option.