# Switch in iOS style

**URL:** https://discourse.nodered.org/t/switch-in-ios-style/97235
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [23 May 2025 18:38 UTC](https://discourse.nodered.org/t/switch-in-ios-style/97235 "2025-05-23T18:38:32Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![MKaiser96](https://avatars.discourse-cdn.com/v4/letter/m/8c91f0/32.png) [@MKaiser96](https://discourse.nodered.org/u/MKaiser96)
#### Post date: [23 May 2025 18:38 UTC](https://discourse.nodered.org/t/switch-in-ios-style/97235/1 "2025-05-23T18:38:32Z")

</div>

Hi,

I want to built a dashboard in iOS Style. How can I style the switch in iOS style?

Here is an example of the iOS settings.

 ![Screenshot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c3174decbba51f426630047f4c6bab18317e1d9.png)

Best regards,  
Markus

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [23 May 2025 20:03 UTC](https://discourse.nodered.org/t/switch-in-ios-style/97235/2 "2025-05-23T20:03:45Z")

</div>

Sorry to call you out @hotNipi  
But you're the first member that popped into my head.

I am not bad at CSS, but not that good.

I should mention, plenty of others here that can do this type of style - I think @bakman2 & @BartButenaers are pretty intune with DB CSS hackery

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [24 May 2025 04:54 UTC](https://discourse.nodered.org/t/switch-in-ios-style/97235/3 "2025-05-24T04:54:56Z")

</div>

I have tried to add a class to the default switch and style it, but the vuetify behaviour is messy to override everything.

I would opt for a custom template:

```auto
<template>
  <div class="switch-row">
    <span class="switch-label">Raster</span>
    <label class="ios-switch">
      <input
        type="checkbox"
        v-model="value"
        :checked="msg.payload"
        @change="this.send({payload: value})"
      >
      <span class="slider"></span>
    </label>
  </div>
</template>

<style>
  .switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;

  }

  .switch-label {
    font-size:1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  .ios-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
  }

  .ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a3a3a;
    border-radius: 16px;
    transition: background 0.2s;
  }

  .ios-switch input:checked+.slider {
    background-color: #4cd964;
  }

  .slider::before {
    content: "";
    position: absolute;
    height: 28px;
    width: 28px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
  }

  .ios-switch input:checked+.slider::before {
    transform: translateX(20px);
  }
</style>

```

Renders:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/409d0abd79460a2d3a80926790d8b6c2b35bc2cf.png)

You can send a payload with true or false and it will toggle. Upon change it will emit true/false.

example flow

```auto
[{"id":"2183a7fff2495e79","type":"ui-template","z":"1f2e6f7bfbcb58e5","group":"f43485e0cc869747","page":"","ui":"","name":"custom switch","order":2,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"switch-row\">\n <span class=\"switch-label\">Raster</span>\n <label class=\"ios-switch\">\n <input\n type=\"checkbox\"\n v-model=\"value\"\n :checked=\"msg.payload\"\n @change=\"this.send({payload: value})\"\n >\n <span class=\"slider\"></span>\n </label>\n </div>\n</template>\n\n<style>\n .switch-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n\n }\n\n .switch-label {\n font-size:1rem;\n font-weight: 400;\n letter-spacing: 0.01em;\n }\n\n .ios-switch {\n position: relative;\n display: inline-block;\n width: 52px;\n height: 32px;\n }\n\n .ios-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #3a3a3a;\n border-radius: 16px;\n transition: background 0.2s;\n }\n\n .ios-switch input:checked+.slider {\n background-color: #4cd964;\n }\n\n .slider::before {\n content: \"\";\n position: absolute;\n height: 28px;\n width: 28px;\n left: 2px;\n top: 2px;\n background: #fff;\n border-radius: 50%;\n transition: transform 0.2s;\n }\n\n .ios-switch input:checked+.slider::before {\n transform: translateX(20px);\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":180,"wires":[["d72d6e2ce9b7facf"]]},{"id":"d72d6e2ce9b7facf","type":"debug","z":"1f2e6f7bfbcb58e5","name":"debug 26","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":180,"wires":[]},{"id":"b4a686e748bee4de","type":"inject","z":"1f2e6f7bfbcb58e5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":290,"y":160,"wires":[["2183a7fff2495e79"]]},{"id":"b67d2a648f122614","type":"inject","z":"1f2e6f7bfbcb58e5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":290,"y":200,"wires":[["2183a7fff2495e79"]]},{"id":"f43485e0cc869747","type":"ui-group","name":"Group 3","page":"3969e3bc69083441","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"3969e3bc69083441","type":"ui-page","name":"db test","ui":"ae5e1b003bc32ad3","path":"/page2","icon":"home","layout":"grid","theme":"c19989f7fdf6e63d","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"ae5e1b003bc32ad3","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"c19989f7fdf6e63d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"4px","groupGap":"4px","groupBorderRadius":"4px","widgetGap":"4px"}}]

```

---

<div class="post-metadata">

### Author: ![MKaiser96](https://avatars.discourse-cdn.com/v4/letter/m/8c91f0/32.png) [@MKaiser96](https://discourse.nodered.org/u/MKaiser96)
#### Post date: [25 May 2025 14:39 UTC](https://discourse.nodered.org/t/switch-in-ios-style/97235/4 "2025-05-25T14:39:00Z")

</div>

Thank you for your feedback.

I would like to modify the style of the standard ui-switch because some other nodes (scheduler) also use this style.

It would be nice if you could style the default switch.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [24 June 2025 14:39 UTC](https://discourse.nodered.org/t/switch-in-ios-style/97235/5 "2025-06-24T14:39:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.