v4.2.12

Switch

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

Usage

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)} />;
}

Inner Labels

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


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

Get input ref

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


function Demo() {
  const ref = useRef<HTMLInputElement>();
  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
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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