ComponentsText Field
Inputs

Text Field

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

Design question

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

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={{

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