Text Field
Navigation
Tabs
Conversation
MarkerMessage
ComponentsText Field
Inputs

Text Field

Single-line text input with CJK IME composition support in a vertical interface.

$ npx verticallyworks add text-field
Design question

How does a text input compose CJK characters in a vertical context, and where does the IME candidate window appear?

Decision

CJK input requires IME composition · an intermediate state where the candidate characters are shown before confirmation. Where the candidate window lands in a vertical context is still unsolved.

Default

The input itself stays horizontal · CJK IME composition requires a horizontal baseline.

Typed text renders vertically here ↑

Type Korean, Japanese, or Chinese above. The field is horizontal (IME needs it); the resulting content flows vertically where it lives in the reader.

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

Do
  • 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

Accessibility

label element required. aria-describedby for error messages. autocomplete attribute appropriate to context.

Open question

Where does the IME candidate window appear in a vertical layout? Platform IME APIs rarely expose enough control to reposition it.

PreviousToggleNext Search