Skip to content

Latest commit

 

History

History
553 lines (488 loc) · 15.1 KB

switch.mdx

File metadata and controls

553 lines (488 loc) · 15.1 KB
title description navigation github prev next
Tailwind CSS Switch for React - Material Tailwind
Customise your web projects with our easy-to-use switch component for Tailwind CSS and React using Material Design guidelines.
switch
checked-switch
switch-colors
switch-label
switch-ripple-effect
switch-disabled
switch-with-description
switch-with-custom-styles
switch-props
types-color
switch-theme
switch-theme-object-type
switch-theme-customization
switch
stepper
tabs
# Tailwind CSS Switch - React

Use our Tailwind CSS Switch component to let users adjust settings on/off. The option that the Switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

See below our example that will help you create simple and easy-to-use Switch component for your Tailwind CSS and React project.


<CodePreview link="switch#switch" component={<SwitchExamples.SwitchDefault />}>

import { Switch } from "@material-tailwind/react";

export function SwitchDefault() {
  return <Switch />;
}

## Checked Switch

Make a Switch component checked by default using the defaultChecked props.

<CodePreview component={<SwitchExamples.CheckedSwitch />}>

import { Switch } from "@material-tailwind/react";

export function CheckedSwitch() {
  return <Switch defaultChecked />;
}

## Switch Colors

The Switch component comes with 19 different colors that you can change it using the color prop.

<CodePreview link="switch#switch-colors" component={<SwitchExamples.SwitchColors />}>

import { Switch } from "@material-tailwind/react";

export function SwitchColors() {
  return (
    <div className="flex w-max gap-4">
      <Switch color="blue" defaultChecked />
      <Switch color="red" defaultChecked />
      <Switch color="green" defaultChecked />
      <Switch color="amber" defaultChecked />
      <Switch color="teal" defaultChecked />
      <Switch color="indigo" defaultChecked />
      <Switch color="purple" defaultChecked />
      <Switch color="pink" defaultChecked />
    </div>
  );
}

## Switch with Label

You can add a label for the Switch component by passing the label prop to the Switch component.

<CodePreview link="switch#switch-label" component={<SwitchExamples.SwitchLabel />}>

import { Switch } from "@material-tailwind/react";

export function SwitchLabel() {
  return <Switch label="Automatic Update" />;
}

## Switch Ripple Effect

You can turn on/off the ripple effect for the Switch component using the ripple prop.

<CodePreview link="switch#switch-ripple-effect" component={<SwitchExamples.SwitchRippleEffect />}>

import { Switch } from "@material-tailwind/react";

export function SwitchRippleEffect() {
  return (
    <div className="space-x-8">
      <Switch label="Ripple Effect On" ripple={true} />
      <Switch label="Ripple Effect Off" ripple={false} />
    </div>
  );
}

## Switch Disabled

You can make a switch disable by passing the disabled prop to the Switch component.

<CodePreview component={<SwitchExamples.SwitchDisabled />}>

import { Switch } from "@material-tailwind/react";

export function SwitchDisabled() {
  return <Switch disabled={true} />;
}

## Switch with Description

Use the example below for a more complex usage of switch with label that contains some description.

<CodePreview component={<SwitchExamples.SwitchWithDescription />}>

import { Switch, Typography } from "@material-tailwind/react";

export function SwitchWithDescription() {
  return (
    <Switch
      label={
        <div>
          <Typography color="blue-gray" className="font-medium">
            Remember Me
          </Typography>
          <Typography variant="small" color="gray" className="font-normal">
            You&apos;ll be able to login without password for 24 hours.
          </Typography>
        </div>
      }
      containerProps={{
        className: "-mt-5",
      }}
    />
  );
}

## Switch with Custom Styles

You can use the className, containerProps, circleProps and labelProps prop to add custom styles to the Switch component.

<CodePreview component={<SwitchExamples.SwitchCustomStyles />}>

import { Switch } from "@material-tailwind/react";

export function SwitchCustomStyles() {
  return (
    <Switch
      id="custom-switch-component"
      ripple={false}
      className="h-full w-full checked:bg-[#2ec946]"
      containerProps={{
        className: "w-11 h-6",
      }}
      circleProps={{
        className: "before:hidden left-0.5 border-none",
      }}
    />
  );
}

## Switch Props

The following props are available for switch component. These are the custom props that we've added for the switch component and you can use all the other native input props as well.

Attribute Type Description Default
color Color Change switch color gray
label node Add label for switch undefined
ripple boolean Add ripple effect for switch true
className string Add custom className for switch ''
disabled boolean Makes the switch disabled false
containerProps object Add custom props for switch container undefined
labelProps object Add custom props for switch label undefined
circleProps object Add custom props for switch circle undefined
inputRef ref Add reference for input element. undefined


For TypeScript Only

import type { SwitchProps } from "@material-tailwind/react";

## Types - Color
type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

## Switch Theme

Learn how to customize the theme and styles for switch component, the theme object for switch component has three main objects:

A. The defaultProps object for setting up the default value for props of switch component.
B. The valid object for customizing the valid values for switch component props.
C. The styles object for customizing the theme and styles of switch component.

You can customize the theme and styles of switch component by adding Tailwind CSS classes as key paired values for objects.



## Switch Theme Object Type
interface SwitchButtonStylesType {
  defaultProps: {
    color: string;
    label: string;
    ripple: boolean;
    className: string;
    disabled: boolean;
    containerProps: object;
    labelProps: object;
    circleProps: object;
  };
  valid: {
    colors: string[];
  };
  styles: {
    base: {
      root: object;
      container: object;
      input: object;
      circle: object;
      ripple: object;
      label: object;
      disabled: object;
    };
    colors: object;
  };
}


For TypeScript Only

import type { SwitchButtonStylesType } from "@material-tailwind/react";

## Switch Theme Customization
const theme = {
  switch: {
    defaultProps: {
      color: "blue",
      label: "",
      ripple: true,
      className: "",
      disabled: false,
      containerProps: undefined,
      labelProps: undefined,
      circleProps: undefined,
    },
    valid: {
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        root: {
          display: "inline-flex",
          alignItems: "items-center",
        },
        container: {
          position: "relative",
          display: "inline-block",
          width: "w-8",
          height: "h-4",
          cursor: "cursor-pointer",
          borderRadius: "rounded-full",
        },
        input: {
          peer: "peer",
          appearance: "appearance-none",
          width: "w-8",
          height: "h-4",
          position: "absolute",
          background: "bg-blue-gray-100",
          borderRadius: "rounded-full",
          cursor: "cursor-pointer",
          transition: "transition-colors duration-300",
        },
        circle: {
          bg: "bg-white",
          width: "w-5",
          height: "h-5",
          borderWidth: "border",
          borderColor: "border-blue-gray-100",
          borderRadius: "rounded-full",
          boxShadow: "shadow-md",
          position: "absolute",
          top: "top-2/4",
          left: "-left-1",
          transform: "-translate-y-2/4 peer-checked:translate-x-full",
          transition: "transition-all duration-300",
          cursor: "cursor-pointer",
          before: {
            content: "before:content['']",
            display: "before:block",
            bg: "before:bg-blue-gray-500",
            width: "before:w-10",
            height: "before:h-10",
            borderRadius: "before:rounded-full",
            position: "before:absolute",
            top: "before:top-2/4",
            left: "before:left-2/4",
            transform: "before:-translate-y-2/4 before:-translate-x-2/4",
            transition: "before:transition-opacity",
            opacity: "before:opacity-0 hover:before:opacity-10",
          },
        },
        ripple: {
          display: "inline-block",
          top: "top-2/4",
          left: "left-2/4",
          transform: "-translate-x-2/4 -translate-y-2/4",
          p: "p-5",
          borderRadius: "rounded-full",
        },
        label: {
          color: "text-gray-700",
          fontWeight: "font-light",
          userSelect: "select-none",
          cursor: "cursor-pointer",
          mt: "mt-px",
          ml: "ml-3",
          mb: "mb-0",
        },
        disabled: {
          opacity: "opacity-50",
          pointerEvents: "pointer-events-none",
        },
      },
      colors: {
        "blue-gray": {
          input: "checked:bg-blue-gray-500",
          circle: "peer-checked:border-blue-gray-500",
          before: "peer-checked:before:bg-blue-gray-500",
        },
        gray: {
          input: "checked:bg-gray-500",
          circle: "peer-checked:border-gray-500",
          before: "peer-checked:before:bg-gray-500",
        },
        brown: {
          input: "checked:bg-brown-500",
          circle: "peer-checked:border-brown-500",
          before: "peer-checked:before:bg-brown-500",
        },
        "deep-orange": {
          input: "checked:bg-deep-orange-500",
          circle: "peer-checked:border-deep-orange-500",
          before: "peer-checked:before:bg-deep-orange-500",
        },
        orange: {
          input: "checked:bg-orange-500",
          circle: "peer-checked:border-orange-500",
          before: "peer-checked:before:bg-orange-500",
        },
        amber: {
          input: "checked:bg-amber-500",
          circle: "peer-checked:border-amber-500",
          before: "peer-checked:before:bg-amber-500",
        },
        yellow: {
          input: "checked:bg-yellow-500",
          circle: "peer-checked:border-yellow-500",
          before: "peer-checked:before:bg-yellow-500",
        },
        lime: {
          input: "checked:bg-lime-500",
          circle: "peer-checked:border-lime-500",
          before: "peer-checked:before:bg-lime-500",
        },
        "light-green": {
          input: "checked:bg-light-green-500",
          circle: "peer-checked:border-light-green-500",
          before: "peer-checked:before:bg-light-green-500",
        },
        green: {
          input: "checked:bg-green-500",
          circle: "peer-checked:border-green-500",
          before: "peer-checked:before:bg-green-500",
        },
        teal: {
          input: "checked:bg-teal-500",
          circle: "peer-checked:border-teal-500",
          before: "peer-checked:before:bg-teal-500",
        },
        cyan: {
          input: "checked:bg-cyan-500",
          circle: "peer-checked:border-cyan-500",
          before: "peer-checked:before:bg-cyan-500",
        },
        "light-blue": {
          input: "checked:bg-light-blue-500",
          circle: "peer-checked:border-light-blue-500",
          before: "peer-checked:before:bg-light-blue-500",
        },
        blue: {
          input: "checked:bg-blue-500",
          circle: "peer-checked:border-blue-500",
          before: "peer-checked:before:bg-blue-500",
        },
        indigo: {
          input: "checked:bg-indigo-500",
          circle: "peer-checked:border-indigo-500",
          before: "peer-checked:before:bg-indigo-500",
        },
        "deep-purple": {
          input: "checked:bg-deep-purple-500",
          circle: "peer-checked:border-deep-purple-500",
          before: "peer-checked:before:bg-deep-purple-500",
        },
        purple: {
          input: "checked:bg-purple-500",
          circle: "peer-checked:border-purple-500",
          before: "peer-checked:before:bg-purple-500",
        },
        pink: {
          input: "checked:bg-pink-500",
          circle: "peer-checked:border-pink-500",
          before: "peer-checked:before:bg-pink-500",
        },
        red: {
          input: "checked:bg-red-500",
          circle: "peer-checked:border-red-500",
          before: "peer-checked:before:bg-red-500",
        },
      },
    },
  },
};