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 state
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 any CSS value to set border-radius:
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[] | Segments to render |
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" | The orientation of the component |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
readOnly | boolean | Determines whether the user can change value |
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 | .asuikit-SegmentedControl-root | Root element |
label | .asuikit-SegmentedControl-label | Input label element |
input | .asuikit-SegmentedControl-input | Radio input (visually hidden) |
control | .asuikit-SegmentedControl-control | Control wrapper, contains input and label |
controlActive | .asuikit-SegmentedControl-controlActive | Active control wrapper |
indicator | .asuikit-SegmentedControl-indicator | Element which indicates current active item, positioned below controls |