Switch 10.16.0

ARIA

RTL

Switch is a control that is used to quickly switch between two possible states.

Switches are only used for these binary actions that occur immediately after the user “flips” the switch.

They are commonly used for “on/off” switches.

Default

The state of the <Switch /> component is controlled by the checked property, which is set to true by default.

"use client";

import { useState } from "react";
import { Switch } from "@heathmont/moon-core-tw";

const Example = () => {
  const [state, setState] = useState(true);
  return (
    <Switch
      checked={state}
      onChange={setState}
      data-tests="test-id"
      aria-label="Default Switch"
    />
  );
};

export default Example;

Sizes

<Switch /> supports three different sizes. By default, if not specified by the prop size, it renders as medium.

The possible values are 2xs (2 extra small), xs (extra small) and sm (small).

"use client";

import { useState } from "react";
import { Switch } from "@heathmont/moon-core-tw";

const Example = () => {
  const [state, setState] = useState(true);

  return (
    <>
      <Switch
        size="2xs"
        checked={state}
        onChange={setState}
        aria-label="Switch with 2xs size"
      />
      <Switch
        size="xs"
        checked={state}
        onChange={setState}
        aria-label="Switch with xs size"
      />
      <Switch
        checked={state}
        onChange={setState}
        aria-label="Switch with sm size"
      />
    </>
  );
};

export default Example;

Disabled

By passing any truthy value to the prop disabled, the component will prevent the click from the user.

"use client";

import { Switch } from "@heathmont/moon-core-tw";

const Example = () => {
  return (
    <>
      <Switch checked disabled aria-label="Disabled Switch" />
      <Switch checked={false} disabled aria-label="Disabled Switch" />
    </>
  );
};

export default Example;

With icons

The <Switch /> component includes icon support, allowing the addition of icons using the onIcon and offIcon properties.

"use client";

import { useState } from "react";
import { Switch } from "@heathmont/moon-core-tw";
import { GenericCheckRounded, GenericClose } from "@heathmont/moon-icons-tw";

const Example = () => {
  const [state, setState] = useState(true);
  return (
    <>
      <Switch
        checked={state}
        onChange={setState}
        size="2xs"
        onIcon={<GenericCheckRounded />}
        offIcon={<GenericClose />}
        aria-label="Switch with icons"
      />
      <Switch
        checked={state}
        onChange={setState}
        size="xs"
        onIcon={<GenericCheckRounded />}
        offIcon={<GenericClose />}
        aria-label="Switch with icons"
      />
      <Switch
        checked={state}
        onChange={setState}
        onIcon={<GenericCheckRounded />}
        offIcon={<GenericClose />}
        aria-label="Switch with icons"
      />
    </>
  );
};

export default Example;

Customization

To add extra styling to the <Switch /> component, utilize the className property. To change the styles of the checked state, use the moon-checked selector.

"use client";

import { useState } from "react";
import { Switch } from "@heathmont/moon-core-tw";

const Example = () => {
  const [state, setState] = useState(true);
  return (
    <>
      <Switch
        checked={state}
        onChange={setState}
        className="bg-nappa moon-checked:bg-roshi"
        aria-label="Switch with custom styles"
      />
      <Switch
        checked={state}
        onChange={setState}
        className="bg-krillin moon-checked:bg-chichi"
        aria-label="Switch with custom styles"
      />
    </>
  );
};

export default Example;

Using with HTML forms

To use the <Switch /> component within HTML forms, enclose it in a <form> tag.

"use client";

import { useState } from "react";
import { Switch } from "@heathmont/moon-core-tw";

const Example = () => {
  const [state, setState] = useState(true);
  return (
    <form action="/notification-settings" method="post">
      <Switch
        checked={state}
        onChange={setState}
        name="Notification"
        value="on"
        aria-label="Notification"
      />
    </form>
  );
};

export default Example;

The <Switch /> component can easily be integrated with the <Tooltip /> component. Simply use the <Switch /> as a trigger inside <Tooltip.Trigger /> sub-component, as demonstrated in the example below.

"use client";

import { useState } from "react";
import { Switch, Tooltip } from "@heathmont/moon-core-tw";

const Example = () => {
  const [state, setState] = useState(true);
  return (
    <Tooltip>
      <Tooltip.Trigger>
        <Switch
          checked={state}
          onChange={setState}
          data-tests="test-id"
          aria-label="Switch with Tooltip"
        />
      </Tooltip.Trigger>
      <Tooltip.Content>
        This is the tooltip for Switch
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip>
  );
};

export default Example;

Switch

These are props specific to the Switch component:

Name	Type	Default
checked	boolean	-
className	string	-
disabled	boolean	_
name	string	-
offIcon	"JSX.Element" \| string	-
onChange	(data) => void	-
onIcon	"JSX.Element" \| string	-
size	"2xs" \| "xs" \| "sm"	sm
value	string	-