SegmentedControl
Usage
Controlled
Data prop
SegmentedControl support two different data formats:
- An array of strings – use when you do not need to customize item component or display
label
different thanvalue
- An array of objects with required
value
andlabel
properties and any other additional properties
Disabled
React node as label
Full width and orientation
By default, SegmentedControl will take only the amount of space that is required to render elements.
Set fullWidth
prop to make it block and take 100% width of its container.
Sizes
Component supports 5 sizes: xs, sm, md, lg, xl. Size controls font-size and padding properties.
SegmentedControl sizes from xs to xl:
Radius
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:
Color
By default, segmented control uses theme.white
with shadow in light color scheme and theme.colors.dark[6]
background color for active element.
You can choose any color defined in theme.colors
in case you need colored variant:
Transitions
Change transition properties with:
- transitionDuration – all transitions duration in ms (ignored if user prefers to reduce motion)
- transitionTimingFunction – defaults to
theme.transitionTimingFunction
Accessibility and usability
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.
SegmentedControl component props
Name | Type | Description |
---|---|---|
color | MantineColor | Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark |
data * | string[] | SegmentedControlItem[] | Data based on which controls are rendered |
defaultValue | string | Default value for uncontrolled component |
disabled | boolean | Disabled input state |
fullWidth | boolean | True if component should have 100% width |
name | string | Name of the radio group, default to random id |
onChange | (value: string) => void | Called when value changes |
orientation | "horizontal" | "vertical" | Display Vertically |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Border-radius from theme or number to set border-radius in px |
size | "xs" | "sm" | "md" | "lg" | "xl" | Controls font-size, paddings and height |
transitionDuration | number | Transition duration in ms, set to 0 to turn off transitions |
transitionTimingFunction | string | Transition timing function for all transitions, defaults to theme.transitionTimingFunction |
value | string | Current selected value |
SegmentedControl component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-SegmentedControl-root | Root element |
label | .mantine-SegmentedControl-label | Input label element |
labelActive | .mantine-SegmentedControl-labelActive | Label of active element |
input | .mantine-SegmentedControl-input | Radio input (visually hidden) |
control | .mantine-SegmentedControl-control | Control wrapper, contains input and label |
controlActive | .mantine-SegmentedControl-controlActive | Active control wrapper |
active | .mantine-SegmentedControl-active | Element which indicates current active item, positioned below controls |
disabled | .mantine-SegmentedControl-disabled | Disabled item modifier |