Segmented Control

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            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>
                                                            );
                                                        };
                                                        
                                                        
                                                        
                                                            

Storybook

Open example in our Storybook

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

API

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'

SegmentedControlItem

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