Actions

Toggle

A pressable element that switches between two states — on and off.

Design question

Does the binary on/off axis conflict with vertical reading direction, or does its perpendicular orientation provide useful contrast?

Default

글씨를 세로로 쓰는 것세로쓰기라 한다

A vertical list: three 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 { Switch } from "@/components/ui/switch"
2
3function Settings() {
4  const [dark, setDark] = useState(true)
5  const [serif, setSerif] = useState(false)
6
7  return (
8    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>

Guidance

✓Keep toggle pill horizontal — the cross-axis communicates 'setting, not reading'
✓Always pair with a label that explains current state effect
✓Use haptic feedback on state change in native implementations

Don't

✗Rotate toggle pills to be vertical — they resemble sliders
✗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 { Switch } from "@/components/ui/switch"
2
3	function Settings() {
4	const [dark, setDark] = useState(true)
5	const [serif, setSerif] = useState(false)
6
7	return (
8	<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>