Pyro

Appearance

Switch ​

Beta 1.1Kb
js
import 'pyro/switch'
Preview Code Stackblitz

Usage ​

html
<pyro-switch checked></pyro-switch>

Variations ​

Props ​

ts
interface SwitchProps {
  /** Checked */
  checked?: boolean;
  /** Disabled */
  disabled?: boolean;
  onInput?: (e: TargetValueEvent) => void;
}

Slots ​

No slots.

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * @prop {--pyro-switch-border-radius = --pyro-switch-size} - set low value for squared look, equals size by default
 * @prop {--pyro-switch-size = 1em} - size of the switch
 * @prop {--pyro-switch-border = --pyro-border} - `border`
 * @prop {--pyro-switch-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-switch-accent-color = --pyro-accent-color} - `background`
 * @prop {--pyro-switch-ball-size = --pyro-switch-size=1em} - ball size
 * @prop {--pyro-switch-ball-color = --pyro-foreground-color} - ball `background`
 * @prop {--pyro-switch-ball-border = --pyro-border} - ball `border`
 * @prop {--pyro-switch-disabled-color = --pyro-disabled-color} - disabled `background`
 */