React | Segmented Control | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { SegmentedControl, SegmentedControlItem } from '@optimus-web/core';
                                                        
                                                        const MyComponent = () => {
                                                            const [value, setValue] = useState('1');
                                                        
                                                            return (
                                                                <SegmentedControl
                                                                  value={value}
                                                                  onChange={(_e, val) => setValue(val)}
                                                                  size={size}
                                                                  disabled={disabled}
                                                                  name="my-component"
                                                                >
                                                                <SegmentedControlItem
                                                                    label="Lorem ipsum dolor sit amet consectetur adipiscing elit"
                                                                    value="1"
                                                                />
                                                                <SegmentedControlItem
                                                                    label="Vivamus sollicitudin metus lorem ac dignissim enim sagittis vitae"
                                                                    value="2"
                                                                    disabled
                                                                />
                                                                <SegmentedControlItem
                                                                    label="Fusce at libero tincidunt neque dignissim iaculis"
                                                                    value="3"
                                                                />
                                                                <SegmentedControlItem
                                                                    label="Vestibulum lacinia elit id ante mattis ornare"
                                                                    value="4"
                                                                />
                                                                <SegmentedControlItem
                                                                    label="Lorem ipsum dolor sit amet consectetur adipiscing elit"
                                                                    value="5"
                                                                />
                                                                </SegmentedControl>
                                                            );
                                                        };

Name	Description	Type	Default
children	SegmentedControlItems. Max 5 items, min 1	SegmentedControlItem	-
onChange	Callback for value changes	(e: React.MouseEvent<HTMLButtonElement>, value: string) => void	-
value?	Current selected value	boolean \| string \| number	undefined
name?	Used for testing purposes	string	undefined
disabled?	Disables the whole component	boolean	undefined
className?	Add a CSS class to the main container	string	undefined
size?	Define the size of the component	Size ('small' \| 'medium' \| 'large' \| 'extraLarge')	'medium'

Name	Description	Type	Default
onChange	Callback for value changes	(e: React.MouseEvent<HTMLButtonElement>, value: string) => void	-
value	Current selected value	boolean \| string \| number	-
name?	Used for testing purposes	string	undefined
disabled?	Disables the whole component	boolean	undefined
label?	Text shown in the button	React.ReactNode \| string	undefined
checked?	Defines if the item is active	boolean	undefined

Segmented Control

Resources

Example

API

SegmentedControl

SegmentedControlItem