SegmentedControl

Usage

React

Angular

Vue

Svelte

import { SegmentedControl } from '@mantine/core';

function Demo() {
  return (
    <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:

An array of strings – use when you do not need to customize item component or display label different than value
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' },
]} />

Disabled state

import { SegmentedControl } from '@mantine/core';

function Demo() {
  return (
    <>
      <SegmentedControl disabled />

      <SegmentedControl
        data={[
          { value: 'preview', label: 'Preview', disabled: true },
          { value: 'code', label: 'Code' },
          { value: 'export', label: 'Export' },
        ]}
      />
    </>
  );
}

React node as label

Preview

Code

Export

import { Center, SegmentedControl, Box } from '@mantine/core';
import { IconEye, IconCode, IconExternalLink } from '@tabler/icons-react';

function Demo() {
  return (
    <SegmentedControl
      data={[
        {
          value: 'preview',
          label: (
            <Center>
              <IconEye size="1rem" />
              <Box ml={10}>Preview</Box>
            </Center>
          ),
        },
        {
          value: 'code',
          label: (
            <Center>
              <IconCode size="1rem" />
              <Box ml={10}>Code</Box>
            </Center>
          ),
        },
        {
          value: 'export',
          label: (
            <Center>
              <IconExternalLink size="1rem" />
              <Box ml={10}>Export</Box>
            </Center>
          ),
        },
      ]}
    />
  );
}

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.

import { SegmentedControl } from '@mantine/core';

function Demo() {
  return <SegmentedControl />;
}

Radius

xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use any CSS value to set border-radius:

<SegmentedControl radius="lg" /> // -> theme predefined large radius
<SegmentedControl radius={16} /> // -> { borderRadius: '1rem' }
<SegmentedControl radius={0} /> // -> { borderRadius: 0 }

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[6] background color for active element. You can choose any color defined in theme.colors in case you need colored variant:

React

Angular

Vue

Svelte

Color

import { SegmentedControl } from '@mantine/core';

function Demo() {
  return <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

import { SegmentedControl } from '@mantine/core';

function Demo() {
  return (
    <>
      {/* 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 a regular radio group.

Go back

Rating – @mantine/core

Up next

Select – @mantine/core

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	.mantine-SegmentedControl-root	Root element
label	.mantine-SegmentedControl-label	Input label 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
indicator	.mantine-SegmentedControl-indicator	Element which indicates current active item, positioned below controls

Learn more about Styles API