SegmentedController

React Design Guidelines

Usage

Props

Name	Type	Required	Default	Description
active	number	false		The segment is active since 10.19.0
block	boolean	false		The segment controller is block sized since 10.19.0
children	ReactNode	false
className	string	false		Additional classNames
disabled	boolean	false		Disables all segments in the controller since 10.19.0
style	CSSProperties	false		Additional CSS styles
variant	"" \| "block"	false		deprecated Please use the `block` prop deprecatedsince 11 since 10.19.0
onChange	Function	false		A callback to be called when the radio group value changes since 10.19.0

block

disabled

Applying disabled to the SegmentedController will disable all segments

Applying tooltip to the SegmentedController.Segment will use Tooltip with a hover trigger. Passing a string applies tooltip styles, while passing an element does not.

SegmentedController.Segment

Name	Type	Required	Default	Description
active	boolean	false		The segment is active since 10.19.0
children	ReactNode	false
className	string	false		Additional classNames
disabled	boolean	false		Is the segment disabled since 10.19.0
placement	Placement	false		To change the tooltip placement since 10.19.0
style	CSSProperties	false		Additional CSS styles
tooltip	ReactNode	false		The tooltip we want to display on hover since 10.19.0

Advanced

State