SegmentedControl

Horizontal control made of multiple segments, alternative to RadioGroup
Import

Usage

SegmentedControl is usually used as an alternative to:

  • Tabs to switch views
  • RadioGroup to capture user feedback limited to certain options
<SegmentedControl
data={[
{ label: 'React', value: 'react' },
{ label: 'Angular', value: 'ng' },
{ label: 'Vue', value: 'vue' },
{ label: 'Svelte', value: 'svelte' },
]}
/>

Controlled

import { useState } from 'react';
import { SegmentedControl } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('react');
return (
<SegmentedControl
value={value}
onChange={setValue}
data={[
{ label: 'React', value: 'react' },
{ label: 'Angular', value: 'ng' },
{ label: 'Vue', value: 'vue' },
{ label: 'Svelte', value: 'svelte' },
]}
/>
);
}

Data prop

SegmentedControl support two different data formats:

  1. An array of strings – use when you do not need to customize item component or display label different than value
  2. An array of objects with required value and label properties and any other additional properties
// Data as an array of strings, will be mapped to
// [
// { value: 'React', label: 'React' },
// { value: 'Angular', label: 'Angular' },
// { value: 'Svelte', label: 'Svelte' },
// { value: 'Vue', label: 'Vue' },
// ]
<SegmentedControl data={['React', 'Angular', 'Svelte', 'Vue']} />
// Data as an array of objects:
<SegmentedControl data={[
{ value: 'React', label: 'React' },
{ value: 'Angular', label: 'Angular' },
{ value: 'Svelte', label: 'Svelte' },
{ value: 'Vue', label: 'Vue' },
]} />

React node as label

You can use any React node as label in data prop:

import { Center, SegmentedControl } from '@mantine/core';
import { EyeOpenIcon, CodeIcon, ExternalLinkIcon } from '@modulz/radix-icons';
function Demo() {
return (
<SegmentedControl
data={[
{
value: 'preview',
label: (
<Center>
<EyeOpenIcon />
<div style={{ marginLeft: 10 }}>Preview</div>
</Center>
),
},
{
value: 'code',
label: (
<Center>
<CodeIcon />
<div style={{ marginLeft: 10 }}>Code</div>
</Center>
),
},
{
value: 'export',
label: (
<Center>
<ExternalLinkIcon />
<div style={{ marginLeft: 10 }}>Export</div>
</Center>
),
},
]}
/>
);
}

Full width

By default SegmentedControl is inline and will take only the amount of space which is required to render elements. Set fullWidth prop to make it block and take 100% width of its container:

// By default component is inline
<SegmentedControl />
// Set fullWidth to make it block and take 100% of width
<SegmentedControl fullWidth />

Sizes

Component supports 5 sizes: xs, sm, md, lg, xl. Size controls font-size and padding properties.

<SegmentedControl size="sm" />

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:

<SegmentedControl radius="lg" /> // -> theme predefined large radius
<SegmentedControl radius={20} /> // -> { borderRadius: '20px' }
<SegmentedControl radius={0} /> // -> { borderRadius: 0 }

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:

Color
<SegmentedControl color="blue" />

Transitions

Change transition properties with:

  • transitionDuration – all transitions duration in ms (ignored if user prefers to reduce motion)
  • transitionTimingFunction – defaults to theme.transitionTimingFunction
No transitions
500ms linear transition
// No transitions
<SegmentedControl transitionDuration={0} />
// 500ms linear transition
<SegmentedControl
transitionDuration={500}
transitionTimingFunction="linear"
/>

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 regular radio group.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback