tsx
1// Vertical text field · composition-aware
2<div style={{ position: "relative" }}>
3  <input
4    type="text"
5    placeholder="검색어를 입력하세요…"
6    lang="ko"
7    inputMode="text"
8    style={{

Source

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

tsx
1"use client";
2
3/**
4 * VerticalTextField · a labeled text input for vertical interfaces.
5 *
6 * The input itself deliberately stays horizontal: CJK IME composition
7 * (candidate windows, inline conversion) assumes a horizontal baseline, and
8 * fighting it costs more than it teaches. The field's vertical fluency lives

Guidance

Set lang attribute to match content language for IME accuracy
Keep input field horizontal even in vertical layouts · rotating input is disorienting
Show placeholder text in the target language

Don't

Apply writing-mode: vertical-rl to the input element itself
Assume the IME candidate window won't obscure your vertical content
Use a single text field for multi-line vertical prose

PreviousToggle Next Search

1	// Vertical text field · composition-aware
2	<div style={{ position: "relative" }}>
3	<input
4	type="text"
5	placeholder="검색어를 입력하세요…"
6	lang="ko"
7	inputMode="text"
8	style={{

1	"use client";
2
3	/**
4	* VerticalTextField · a labeled text input for vertical interfaces.
5	*
6	* The input itself deliberately stays horizontal: CJK IME composition
7	* (candidate windows, inline conversion) assumes a horizontal baseline, and
8	* fighting it costs more than it teaches. The field's vertical fluency lives