Quaff

QSwitch

Switches turn settings on or off, with changes taking effect immediately. Clear labels and optional state icons help explain the setting.

RAILWAY SETTINGS

Platform lamps

Lamps on

info QSwitch API Source
interface QSwitchProps extends HTMLAttributes<HTMLDivElement>
checkedIcon
?: MaterialSymbol | Snippet = undefined
Custom icon to show when the switch is on. Use an icon that communicates the selected state unambiguously. Can be a Material Symbol name or a custom snippet.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
icons
?: boolean = false
Shows the default check/close icons in the switch handle.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
labelPosition
?: "left" | "right" = "right"
Position of the label relative to the switch.
showOnlyCheckedIcon
?: boolean = false
Shows only the check icon when the switch is on.
uncheckedIcon
?: MaterialSymbol | Snippet = undefined
Custom icon to show when the switch is off. Use an icon that communicates the unselected state unambiguously. Can be a Material Symbol name or a custom snippet.
value
?: boolean = $bindable(undefined)
The bound value of the component.

Usage

Value and Labels
Bind value to a boolean for a setting that applies immediately. The default labelPosition="right" puts the label after the switch; use "left" to put it before. Toggle label placement below to compare.
Labels on the left

Platform settings

Platform lamps
Use hilltop loop

Platform one · Signal: stop · Platform lamps on

icons adds the default check and close symbols. showOnlyCheckedIcon shows a check only when the switch is on.

Custom Icons and Events
Use Material Symbol names or snippets for checkedIcon and uncheckedIcon. This lever uses two small SVG snippets. A component reference exposes toggle(); both the switch and the desk button below update the same value.
DEPARTURE SIGNAL

Stop

Allow departure

The departure setting controls the signal above.

Lever activity

click sees the previous value; input and change see the new value. The method emits input and change.

  1. Operate the lever to see its events.
Settings in a List
A whole row can be a switch, with an inert visual QSwitch inside it. Alternatively, keep the row passive and make QSwitch its only control. Both patterns below apply a setting immediately; each setting has one keyboard target.

Supply cabinet

Track power
Supply the locomotive and departure signal.
Station signs
Show the nameboard on station displays.

Trackside details

Tunnel lamps
Light the entrance to the hilltop tunnel.
Crossing gate
Always enabled during visiting hours.
Workshop spur
Closed while its track is being repaired.
Accessibility

Name switches with a visible label, aria-labelledby referencing nearby text, or aria-label. Keep labels stable; aria-checked exposes the on/off state.

Tab and Shift+Tab move focus; Space or Enter toggles. disabled prevents user interaction and removes the tab stop.

For clickable rows, put role="switch", an accessible name and aria-checked on the row. Make its QSwitch inert and aria-hidden="true" to keep one keyboard target.

Privacy Policy