Switch

Source

• Switch.css

Example

<div class="x-switch">
    <input type="checkbox">
    Switch
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/switch/props/default.css" layer(theme);
@import "winduum/src/components/switch/default.css" layer(utilities);
@import "winduum/src/components/switch/interactive.css" layer(utilities);
@import "winduum/src/components/switch/invalid.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-switch-inline-size: 8rem;
    --x-switch-block-size: 2.5rem;
  }
}

Winduum CSS Code

winduum/src/components/switch/props/default.css

:root, :host {
  --x-switch-inline-size: 3rem;
  --x-switch-block-size: 1.5rem;
  --x-switch-icon-size: 1.125rem;
  --x-switch-font-weight: var(--font-weight-normal);
  --x-switch-font-size: var(--text-sm);
  --x-switch-line-height: calc(1em + 0.25rem);
  --x-switch-gap: 0.75rem;
  --x-switch-border-radius: var(--radius-full);
  --x-switch-background-color: currentColor;
  --x-switch-outline-width: 2px;
  --x-switch-outline-color: currentColor;

  &.dark {
    --x-switch-background-color: var(--color-body-tertiary);
  }
}

winduum/src/components/switch/default.css

.x-switch {
  font-weight: var(--x-switch-font-weight);
  font-size: var(--x-switch-font-size);
  line-height: var(--x-switch-line-height);
  letter-spacing: var(--x-switch-letter-spacing);
  gap: var(--x-switch-gap);
  display: inline-flex;
  text-wrap: pretty;

  :where(input) {
    inline-size: var(--x-switch-inline-size);
    block-size: var(--x-switch-block-size);
    padding: calc((var(--x-switch-block-size) - var(--x-switch-icon-size)) / 2);
    border-radius: var(--x-switch-border-radius);
    background-color:
      color-mix(
        in var(--x-switch-background-color-space, srgb),
        var(--x-switch-background-color) var(--x-switch-background-color-opacity, 100%),
        var(--x-switch-background-color-mix, transparent)
      );
    outline:
      var(--x-switch-outline-width) solid
      color-mix(
        in var(--x-switch-outline-color-space, srgb),
        var(--x-switch-outline-color) var(--x-switch-outline-color-opacity, 0%),
        var(--x-switch-outline-color-mix, transparent)
      );
    outline-offset: var(--x-switch-outline-offset);
    display: flex;
    position: relative;
    flex-shrink: 0;

    &::before {
      inline-size: var(--x-switch-icon-size);
      block-size: var(--x-switch-icon-size);
      background-color: var(--color-light);
      transition: var(--transition-all);
      border-radius: inherit;
      margin-block: auto;
      content: "";
    }
  }
}

winduum/src/components/switch/interactive.css

.x-switch {
  :where(input) {
    transition-property: var(--default-transition-property);
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);

    &:where(:required) {
      & + *::after {
        color: var(--x-switch-required-color, var(--color-error));
        content: " *";
      }
    }

    &:enabled:focus {
      --x-switch-outline-offset: var(--x-switch-focus-outline-offset);
      --x-switch-outline-color-opacity: var(--x-switch-focus-outline-color-opacity, 40%);
    }

    &:disabled {
      --x-switch-background-color: var(--x-switch-disabled-background-color, currentColor);
      --x-switch-background-color-opacity: var(--x-switch-disabled-background-color-opacity, 15%);
      --x-switch-outline-color: var(--x-switch-disabled-outline-color, currentColor);
      --x-switch-outline-color-opacity: var(--x-check-disabled-outline-color-opacity, 5%);

      cursor: not-allowed;
    }

    &:checked {
      --x-switch-outline-color: var(--color-accent);
      --x-switch-background-color: var(--color-accent);

      &::before {
        margin-inline-start: calc(100% - var(--x-switch-icon-size));
      }
    }

    &:indeterminate {
      &::before {
        margin-inline-start: calc(50% - var(--x-switch-icon-size) / 2);
      }
    }
  }
}

winduum/src/components/switch/invalid.css

.x-switch {
  :user-invalid {
    --x-switch-outline-color: var(--x-switch-invalid-outline-color, var(--color-error));
    --x-switch-background-color: var(--x-switch-invalid-background-color, var(--color-error));
  }
}