A vertical list: two cells stacked as columns flowing right-to-left, each reading top→bottom. The toggle runs on that same axis · thumb up = on · so the control matches the reading direction instead of cutting across it. The preview updates live.

tsx
1import { VerticalToggle } from "@/components/vw/toggle"
2
3function Settings() {
4  const [dark, setDark] = useState(true)
5
6  return (
7    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
8      <span id="dark-label" className="writing-vertical">야간 모드</span>

Source

The exact file npx verticallyworks add toggle copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalToggle · an on/off switch whose thumb travels the reading axis.
5 *
6 * In a vertical interface the toggle runs vertically: up is on, matching the
7 * direction the eye moves instead of cutting across it. Semantics are a native
8 * button with `role="switch"` + `aria-checked`; Space and Enter both toggle.

Guidance

Run the toggle on the reading axis · thumb up = on, matching how the eye moves
Always pair with a label that explains current state effect
Use haptic feedback on state change in native implementations

Don't

Rotate a horizontal toggle with transform · build the vertical travel natively
Use color alone to convey state
Place toggle labels vertically unless they are single CJK characters

Accessibility

role='switch', aria-checked. Space to toggle. Label describes effect, not control name.

Open question

In a fully vertical settings panel, does a horizontal toggle create useful contrast or cognitive dissonance?

PreviousIcon Button Next Text Field

1	import { VerticalToggle } from "@/components/vw/toggle"
2
3	function Settings() {
4	const [dark, setDark] = useState(true)
5
6	return (
7	<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
8	<span id="dark-label" className="writing-vertical">야간 모드</span>

1	"use client";
2
3	/**
4	* VerticalToggle · an on/off switch whose thumb travels the reading axis.
5	*
6	* In a vertical interface the toggle runs vertically: up is on, matching the
7	* direction the eye moves instead of cutting across it. Semantics are a native
8	* button with `role="switch"` + `aria-checked`; Space and Enter both toggle.