SegmentedControl is usually used as an alternative to:
SegmentedControl support two different data formats:
- An array of strings – use when you do not need to customize item component or display
- An array of objects with required
labelproperties and any other additional properties
By default, SegmentedControl will take only the amount of space that is required to render elements.
fullWidth prop to make it block and take 100% width of its container.
Component supports 5 sizes: xs, sm, md, lg, xl. Size controls font-size and padding properties.
SegmentedControl sizes from xs to xl:
xs, sm, md, lg, xl radius values are defined in
theme.radius. Alternatively, you can use a number to set radius in px:
Default theme radius values from xs to xl with lg size:
By default, segmented control uses
theme.white with shadow in light color scheme and
theme.colors.dark background color for active element.
You can choose any color defined in theme.colors in case you need colored variant:
Change transition properties with:
- transitionDuration – all transitions duration in ms (ignored if user prefers to reduce motion)
- transitionTimingFunction – defaults to
SegmentedControl uses radio inputs under the hood, it is accessible by default with no extra steps required. Component support the same keyboard events as a regular radio group.