Switch

Capture boolean input from user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

LabelPosition
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Color
import { Switch } from '@mantine/core';


function Demo() {
  return (
    <Switch
      label="I agree to sell my privacy"
    />
  );
}

Controlled

import { useState } from 'react';
import { Switch } from '@mantine/core';


function Demo() {
  const [checked, setChecked] = useState(false);
  return <Switch checked={checked} onChange={(event) => setChecked(event.currentTarget.checked)} />;
}

Disabled state

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


function Demo() {
  return <Switch disabled >;
}

Inner Labels

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


function Demo() {
  return <Switch onLabel="ON" offLabel="OFF" />;
}

Icon labels

import { Switch, Group, useMantineTheme } from '@mantine/core';
import { IconSun, IconMoonStars } from '@tabler/icons-react';


function Demo() {
  const theme = useMantineTheme();
  return (
    <Group position="center">
      <Switch
        size="md"
        color={theme.colorScheme === 'dark' ? 'gray' : 'dark'}
        onLabel={<IconSun size="1rem" stroke={2.5} color={theme.colors.yellow[4]} />}
        offLabel={<IconMoonStars size="1rem" stroke={2.5} color={theme.colors.blue[6]} />}
      />
    </Group>
  );
}

Thumb icon

import { useState } from 'react';
import { Switch, Group, useMantineTheme } from '@mantine/core';
import { IconCheck, IconX } from '@tabler/icons-react';


function Demo() {
  const theme = useMantineTheme();
  const [checked, setChecked] = useState(false);
  return (
    <Group position="center">
      <Switch
        checked={checked}
        onChange={(event) => setChecked(event.currentTarget.checked)}
        color="teal"
        size="md"
        label="Switch with thumb icon"
        thumbIcon={
          checked ? (
            <IconCheck size="0.8rem" color={theme.colors.teal[theme.fn.primaryShade()]} stroke={3} />
          ) : (
            <IconX size="0.8rem" color={theme.colors.red[theme.fn.primaryShade()]} stroke={3} />
          )
        }
      />
    </Group>
  );
}

Switch.Group

Select your favorite framework/library
This is anonymous
import { Switch } from '@mantine/core';


function Demo() {
  return (
    <Switch.Group
      defaultValue={['react']}
      label="Select your favorite framework/library"
      description="This is anonymous"
      withAsterisk
    >
      <Group mt="xs">
        <Switch value="react" label="React" />
        <Switch value="svelte" label="Svelte" />
        <Switch value="ng" label="Angular" />
        <Switch value="vue" label="Vue" />
      </Group>
    </Switch.Group>
  );
}

Controlled Switch.Group

import { useState } from 'react';
import { Switch } from '@mantine/core';


function Demo() {
  const [value, setValue] = useState<string[]>([]);


  return (
    <Switch.Group value={value} onChange={setValue}>
      <Switch value="react" label="React" />
      <Switch value="svelte" label="Svelte" />
    </Switch.Group>
  );
}

Get input ref

import { useRef } from 'react';
import { Switch } from '@mantine/core';


function Demo() {
  const ref = useRef<HTMLInputElement>(null);
  return <Switch ref={ref} />;
}

Accessibility

Switch is a regular input with checkbox type. Provide aria-label if Switch is used without label:

<Switch /> // -> not ok, input is not labeled
<Switch label="I agree to everything" /> // -> ok, input and label is connected
<Switch aria-label="I agree to everything" /> // -> ok, label is not visible but will be announced by screen reader
Go back
Slider – @mantine/core
Up next
Textarea – @mantine/core

Switch component props

NameTypeDescription
color
MantineColor
Switch checked state color from theme.colors, defaults to theme.primaryColor
description
ReactNode
description, displayed after label
error
ReactNode
Displays error message after input
id
string
Id is used to bind input and label, if not passed unique id will be generated for each input
label
ReactNode
Switch label
labelPosition
"left" | "right"
Position of label
offLabel
ReactNode
Inner label when Switch is in unchecked state
onLabel
ReactNode
Inner label when Switch is in checked state
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, "xl" by default
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined size value
thumbIcon
ReactNode
Icon inside the thumb of switch
wrapperProps
Record<string, any>
Props spread to wrapper element

Switch.Group component props

NameTypeDescription
children *
ReactNode
<Switch /> components only
defaultValue
string[]
Initial value for uncontrolled component
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
onChange
(value: string[]) => void
Called when value changes
required
boolean
Adds required attribute to the input and red asterisk on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, checkbox width, height and border-radius
value
string[]
Value of currently selected checkbox
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps
Record<string, any>
Props spread to InputWrapper

Switch component Styles API

NameStatic selectorDescription
root.mantine-Switch-rootRoot element
input.mantine-Switch-inputCheckbox input
labelWrapper.mantine-Switch-labelWrapperInclude label and description component
body.mantine-Switch-bodyContainer Of Switch
track.mantine-Switch-trackTrack
thumb.mantine-Switch-thumbThumb of Switch
trackLabel.mantine-Switch-trackLabelonLabel and offLabel
error.mantine-Switch-errorError message
description.mantine-Switch-descriptionDescription
label.mantine-Switch-labelLabel
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter