Class ZetaSwitch

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

Cssproperty

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

Cssproperty

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

Cssproperty

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

Cssproperty

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

Cssproperty

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

Cssproperty

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

Cssproperty

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

Cssproperty

--switch-height Height of the switch

Cssproperty

--switch-width Width of the switch

Cssproperty

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

Cssproperty

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

Figma

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

Storybook

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

Hierarchy

  • FormFieldInterface<this> & LitElement<this> & InteractiveInterface<this> & ContourableInterface<this>
    • ZetaSwitch

Other

constructor activeIcon? checked? disabled inactiveIcon? indeterminate input internals name required rounded type value shadowRootOptions styles handleChange key

rendering

render

Other

constructor

OptionalactiveIcon

activeIcon?: ZetaIconName

Icon name to display when switch is ON.

Optionalchecked

checked?: boolean

disabled

disabled: boolean

OptionalinactiveIcon

inactiveIcon?: ZetaIconName

Icon name to display when switch is OFF.

indeterminate

indeterminate: boolean

input

input: HTMLInputElement

internals

internals: ElementInternals

name

name: string

required

required: boolean

rounded

rounded: boolean

type

type: InputType = ...

value

value: string

StaticshadowRootOptions

shadowRootOptions: ShadowRootInit = ...

Staticstyles

styles: CSSResultGroup[] = ...

handleChange

  • handleChange(event): void

  • Parameters

    • event: Event

    Returns void

key

rendering

Protectedrender

  • render(): TemplateResult<1>

  • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

    Returns TemplateResult<1>

Settings

Member Visibility

On This Page

Other
rendering