@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaSwitch

    Switches toggle the state of a single item ON or OFF. To use with icon variant, provide both activeIcon and inactiveIcon

    --switch-track-color Color of the switch track

    --switch-track-active-color Color of the switch track when switch is ON

    --switch-track-disabled-color Color of the switch track when switch is disabled

    --switch-icon-color Color of the activeIcon & inactiveIcon

    --switch-icon-disabled-color Color of the activeIcon & inactiveIcon when disabled

    --switch-thumb-color Color of the switch thumb

    --switch-thumb-disabled-color Color of the switch thumb when disabled

    --switch-height Height of the switch

    --switch-width Width of the switch

    --switch-thumb-size Height & Width of the switch thumb

    --switch-icon-size Height & Width of the activeIcon & inactiveIcon

    track - The switch track

    thumb - The switch thumb

    icon active - The active icon

    icon inactive - The inactive icon

    change - Fired when the checkbox value changes input - Fired when the checkbox value changes

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=1153-26923

    https://zeta-ds.web.app/web/storybook/?path=/docs/switch--docs

    Hierarchy

    • BaseToggleFormElement
      • ZetaSwitch
    Index

    Constructors

    constructor

    Methods

    handleBlur handleChange handleFocus handleInput key render

    Properties

    activeIcon? checked? disabled inactiveIcon? indeterminate input internals max min name placeholder required rounded type value shadowRootOptions styles

    Constructors

    Methods

    • Parameters

      • event: FocusEvent

      Returns void

    • Parameters

      • event: FocusEvent

      Returns void

    • Parameters

      • event: Event

      Returns void

    Properties

    activeIcon?: ZetaIconName

    Icon name to display when switch is ON.

    checked?: boolean
    disabled: boolean
    inactiveIcon?: ZetaIconName

    Icon name to display when switch is OFF.

    indeterminate: boolean
    input: HTMLInputElement
    internals: ElementInternals
    max: number
    min: number
    name: string
    placeholder: string
    required: boolean
    rounded: boolean
    type: "checkbox"
    value: string
    shadowRootOptions: ShadowRootInit = ...
    styles: (CSSResult | CSSResultGroup[])[] = ...

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties