Code

Props

Props	Data Type	Required
value	string	✅
id	string	✅
className	string	❌
name	string	❌
label	string	❌
labelPosition	string (Top, Left)	❌
info	string	❌
checked	boolean	❌
disabled	boolean	❌
onChange	function event	❌

Event Response

Property	Data Type
id	string
name	string
label	string
value	string
checked	boolean

onChange

import React, {useState} from 'react';
import {Switch} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [switchSelection, setSwitchSelection] = useState(false);
    
    const updateState = (e)=>{
        setSwitchSelection(e.checked);
    }
    
    return(
        <div className='container'>
            <Switch 
                id='first' 
                value='element1' 
                label='Element 1'
                onChange={updateState} 
            />
        </div>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• Label

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Switch - Basic Switch ⋅ Storybooksipster-react-component-storybook.netlify.app