Radix-vue switch layout breaks

Question

I use 3 shadcn and Tailwind in my Vue 3 project. I added styles to the switch component from shadcn, but it does not behave as expected. When switching to the active state, the SwitchThumb may move down or up.

For example, in a form I use two switches in a row and one of them breaks

Part of code from form

                <FormField v-slot="{ value, handleChange }" name="On1">
                  <FormItem>
                    <div class="flex gap-3 items-center">
                      <FormControl>
                        <Switch :checked="value" @update:checked="handleChange" />
                      </FormControl>
                      <FormLabel class="inline text-base"> 111 </FormLabel>
                    </div>
                  </FormItem>
                </FormField>

                <FormField v-slot="{ value, handleChange }" name="use1">
                  <FormItem>
                    <div class="flex gap-3 items-center">
                      <FormControl>
                        <Switch :checked="value" @update:checked="handleChange" />
                      </FormControl>
                      <FormLabel class="inline text-base"> 222 </FormLabel>
                    </div>
                  </FormItem>
                </FormField>

elsewhere I use one switch, but it is also crooked

Code of Switch

<template>
  <SwitchRoot
    v-bind="forwarded"
    :class="
      cn(
        `peer  bg-monochrome-2.5  h-4 w-7  cursor-pointer  transition-colors  rounded-3
          focus-visible:outline-monochrome-9
         disabled:cursor-not-allowed
         data-[state=checked]:bg-success-1`,
        props.class,
      )
    "
  >
    <SwitchThumb
      :class="
        cn(
          `pointer-events-none bg-monochrome-6 block h-[14.7px] w-[14px]  transition-transform rounded-[3px]
           data-[state=checked]:translate-x-[13px]  data-[state=checked]:bg-monochrome-1 data-[state=unchecked]:translate-x-[0.8px] `,
        )
      "
    />
  </SwitchRoot>
</template>

How can I make the switch look equally beautiful under any circumstances?

I tried to remove the limitation on the height of the switch so that the height would be generated automatically and added paddings at the top and bottom.

Code

<template>
  <SwitchRoot
    v-bind="forwarded"
    :checked="checked"
    :disabled="disabled"
    :class="
      cn(
        `peer  bg-monochrome-2.5 w-7  cursor-pointer  transition-colors  rounded-3
          focus-visible:outline-monochrome-9
         disabled:cursor-not-allowed
         data-[state=checked]:bg-success-1`,
        props.class,
      )
    "
  >
    <div class="py-[0.85px]">
      <SwitchThumb
        :class="
          cn(
            `pointer-events-none bg-monochrome-6 block h-[14.7px] w-[14px]  transition-transform rounded-[3px]
           data-[state=checked]:translate-x-[13px]  data-[state=checked]:bg-monochrome-1 data-[state=unchecked]:translate-x-[0.8px] `,
          )
        "
      />
    </div>
  </SwitchRoot>
</template>

It worked for the small screen but didn't work for the big one

And now I have no idea

Answer 1

Update your switch component as bellow:

<template>
  <SwitchRoot v-bind="forwarded" :class="cn(
    'peer bg-monochrome-2.5 h-4 w-7 cursor-pointer rounded-[4px] transition-colors focus-visible:outline-monochrome-9 disabled:cursor-not-allowed data-[state=checked]:bg-success-1',
    props.class
  )
    ">
    <SwitchThumb :class="cn(
    'pointer-events-none bg-monochrome-6 block h-[14px] w-[14px] transition-transform rounded-[3px] data-[state=checked]:translate-x-[13px]  data-[state=checked]:bg-monochrome-1 data-[state=unchecked]:translate-x-[1px]'
  )
    " />
  </SwitchRoot>
</template>

If you are still facing issue then it might be causing by some other css