Switch

Basic

The Switch component is used to toggle between two states, typically for binary choices. It can be customized with different props to control its appearance and behavior.

const BasicComponent = () => {
  return <Switch />;
};

Disabled

The Switch component can be disabled using the isDisabled prop. This prevents user interaction with the switch, indicating that it is not currently selectable.

const DisabledComponent = () => {
  return (
    <>
      <Switch checked isDisabled />
      <Switch checked={false} isDisabled />
    </>
  );
};

Track Color

The Switch component allows you to customize the track color using the trackColor prop. This prop lets you change the color of the track, which is the background behind the switch thumb, to match your design or branding.

const TrackColorComponent = () => {
  return (
    <>
      <Switch checked trackColor="red" />
      <Switch trackColor="red" />
    </>
  );
};

Thumb Color

You can change the color of the switch thumb using the thumbColor prop. This allows you to customize the appearance of the thumb, which represents the current state of the switch.

const ThumbColorComponent = () => {
  const [isActive, setIsActive] = React.useState(true);
  const [isActive2, setIsActive2] = React.useState(false);

  return (
    <>
      <Switch
        checked={isActive}
        onValueChange={(value) => setIsActive(value)}
        thumbColor="orange"
      />
      <Switch
        checked={isActive2}
        onValueChange={(value) => setIsActive2(value)}
        thumbColor="orange"
      />
    </>
  );
};

Track and Thumb Color

You can customize both the track color and thumb color of the Switch component using the trackColor and thumbColor props. This allows you to control the appearance of the switch to match your design or branding.

const TrackAndThumbColorComponent = () => {
  const [isActive, setIsActive] = React.useState(true);
  const [isActive2, setIsActive2] = React.useState(false);

  return (
    <>
      <Switch
        checked={isActive}
        onValueChange={(value) => setIsActive(value)}
        trackColor="orange"
        thumbColor="emerald"
      />
      <Switch
        checked={isActive2}
        onValueChange={(value) => setIsActive2(value)}
        trackColor="orange"
        thumbColor="emerald"
      />
    </>
  );
};

Override Color Mode

You can override the color mode of the Switch component and its surrounding UI elements by wrapping them in a Theme component with a specific color mode. This allows you to control the appearance of the switch and other components regardless of the global color mode setting.

const OverrideColorModeComponent = () => {
  return (
    <>
      <Switch checked />
      <Switch checked={false} />
    </>
  );
};

Override Accent Color

You can override the accent color of the Switch component by using the accentColor prop.

const OverrideAccentColorComponent = () => {
  return (
    <>
      <Switch checked accentColor="rose" />
      <Switch checked={false} accentColor="rose" />

      <Switch checked accentColor="emerald" />
      <Switch checked={false} accentColor="emerald" />

      <Switch checked accentColor="sky" />
      <Switch checked={false} accentColor="sky" />
    </>
  );
};

Override Color Mode and Accent Color

You can simultaneously override both the color mode and the accent color of the Switch component by wrapping it in a Theme component with the desired color mode. Additionally, you can use the accentColor prop to specify the accent color of the switch's thumb.

const OverrideColorModeAndAccentColorComponent = () => {
  return (
    <>
      <Switch checked accentColor="rose" />
      <Switch checked={false} accentColor="rose" />

      <Switch checked accentColor="emerald" />
      <Switch checked={false} accentColor="emerald" />

      <Switch checked accentColor="sky" />
      <Switch checked={false} accentColor="sky" />
    </>
  );
};

Handle onValueChange

The Switch component can be controlled using the checked and onValueChange props. This allows you to handle the onValueChange event and update the checked value accordingly.

const HandleOnValueChangeComponent = () => {
  const [isActive, setIsActive] = React.useState(true);
  const [isActive2, setIsActive2] = React.useState(false);

  return (
    <>
      <Switch
        checked={isActive}
        onValueChange={(value) => {
          console.log("value changed", value);
          setIsActive(value);
        }}
      />
      <Switch
        checked={isActive2}
        onValueChange={(value) => {
          console.log("value changed", value);
          setIsActive2(value);
        }}
      />
    </>
  );
};