Components›Search
Inputs

Search

Full-text search with CJK IME composition, results list, and navigation to match.

Design question

Where does the search input appear in a vertical interface, and how does it integrate with vertical IME?

Default

세로 · 죽간 · 두루마리 · 우종서 를 검색해 보세요

The search field itself runs vertically on the reading-start (right) edge — the caret and query text advance top→bottom via `writing-mode: vertical-rl`. Results read as vertical columns flowing right-to-left on the same axis, each match highlighted by background, never rotation.

tsx
1function VerticalSearch() {
2 const [query, setQuery] = useState("")
3 const [results, setResults] = useState([])
4
5 return (
6 <div style={{
7 position: "fixed",
8 inset: 0,

Guidance

Do
  • ✓Keep the search input horizontal — composition requires horizontal baseline
  • ✓Show results in a scannable list, not vertical columns
  • ✓Highlight matches with background color, not text rotation
Don't
  • ✗Display search results as vertical text — this slows scanning
  • ✗Open search in a new page — use an overlay so position is preserved
  • ✗Assume Korean/Japanese/Chinese input works without IME event handling

Accessibility

role='search'. aria-live region for results count. Results list with role='listbox'.

Open Question

Should search results be displayed horizontally (for faster scanning) or vertically (to match the reader's current mode)?

← PreviousText FieldNext →Slider