Switch should be able to have an Icon on its slider

[Jackbaude]

🚀 Feature request

Switch to have an Icon/ Element in it

🧱 Problem Statement / Justification

I want my darkmode switch to have an icon showing whether its in dark mode or light mode. This could be done with a normal button but I like the satisfaction of the switch, however, the switch does not allow to have an icon in it.

✅ Proposed solution or API

Have a prop for <Switch/> to add a element, such as an Icon.

↩️ Alternatives

Like I said I could use a button but I want to be able to use this with a swtich.

📝 Additional Information

[adamint]

This is a great idea

[jatin33]

@segunadebayo I am interested in picking this up, please assign me

[Jackbaude]

@segunadebayo I am interested in picking this up, please assign me

if not assigned feel free to make pr

[segunadebayo]

After much thought, I really think this should be a "recipe" or Codesandbox "example". We don't have plans to add this component.

@jatin33, if you want, please create an example that uses the internal implementation of Switch, we can add it as a recipe and post it in our discord as well.

Thank you.

[Jackbaude]

@jatin33 update me when/ if you finish this

[Jackbaude]

Has there been any update on this?

[downdrown]

I came across this post because I wanted to achieve the same thing, unfortunately I didn't find any "recipe" or example for this.

I played around a little bit and managed to add an icon to the Switch component. This is how it looks and you can find a code sandbox here.

BUT

I'm actually not quite sure that this is the best solution, I'm not too experienced with web development so this is the best thing I could do. If there's anything I could enhance I'd love to get some feedback. 😃

[kyar1s]

I had the same problem. I am a front-end developer, im working on next and im not really happy with chakra ui. I saw the code that the merge and looks like that:

import { FormLabel, Icon, IconButton, Switch } from "@chakra-ui/react";
import React, { useState } from "react";
import { BsSunFill, BsFillMoonFill } from "react-icons/bs";

const Switcher: React.FC = () => {
  const [themeMode, setThemeMode] = useState<"light" | "dark">("dark");
  return (
    <FormLabel
      htmlFor="theme-switcher"
      as={"label"}
      display="flex"
      alignItems="center"
      justifyContent="center"
      gap={2}
      position="relative"
    >
      <IconButton
        aria-label="Toggle light dark mode"
        onClick={() => setCurrency(currency.includes("light") ? "dark" : "light")}
        icon={currency === "light" ? <BsSunFill /> : <BsFillMoonFill />}
      />
    </FormLabel>
  );
};

export default Switcher;

It looks like a button and it switch between those icons... 

I didnt want a result like that so i didnt by myself with a little animation... px are orientative. I suggest to use rem instead. bg and colors are able to be custom.

import { Box, FormLabel, Icon, Input } from "@chakra-ui/react";
import React, { useState } from "react";
import { BsSunFill, BsFillMoonFill } from "react-icons/bs";

const Switcher: React.FC = () => {
  const [themeMode, setThemeMode] = useState<"light" | "dark">("dark");
  return (
    <FormLabel
      htmlFor="theme-switcher"
      as={"label"}
      display="flex"
      alignItems="center"
      justifyContent="center"
      gap={2}
      position="relative"
    >
      <Input
        id="theme-switcher"
        type="checkbox"
        checked={themeMode.includes("light") ? true : false}
        onChange={() => setThemeMode(themeMode.includes("light") ? "dark" : "light")}
        display="inline-block"
        appearance="none"
        cursor="pointer"
        height="24px"
        width="48px"
        backgroundColor="blue.50"
        border="1px solid"
        borderColor="blue.200"
        borderRadius="full"
      />
      <Box
        className={`iconMove `}
        transition="all 0.2s ease-in"
        transform={`${themeMode.includes("light") ? "translateX(0)" : "translateX(24px)"}`}
        position="absolute"
        cursor="pointer"
        top={"1px"}
        left={"1px"}
        w={"22px"}
        h={"22px"}
        bg="blue.900"
        borderRadius="full"
      >
        <Icon
          as={themeMode.includes("light") ? BsSunFill : BsFillMoonFill}
          padding="2px"
          w={"22px"}
          h={"22px"}
        />
      </Box>
    </FormLabel>
  );
};

export default Switcher;

Result as:

It is my first time using chackra ui. Maybe there is some ways to improve it, but for me thats the best one. Also... I know there should be one way to change the icon with framer-motion to do a cool transformation, but i didnt spend time to investigate that.

Kind regards! kyar1s ;)

[barrymichaeldoyle]

I'm quite disappointed that this isn't something that is planned to be added 😞