Contents

Hikari
Guides
Design
- Overview
System
Components — Layer 1
Components — Layer 2
Components — Layer 3

Transfer

Transfer component for dual-column data selection.

Basic Usage

(live preview unavailable)

Add a ```hikari:tsx block after ```hikari:rust to enable TSX preview

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

rsx! {
    div { style: "padding:1rem;display:flex;gap:8px;align-items:center;",
        div { style: "width:120px;border:1px solid #e2e2ea;border-radius:4px;padding:8px;font-size:14px;",
            div { style: "padding:4px 0;cursor:pointer;", "☐ Item 1" }
            div { style: "padding:4px 0;cursor:pointer;color:#999;", "☑ Item 2" }
        }
        div { style: "display:flex;flex-direction:column;gap:4px;",
            button { style: "padding:4px 8px;border:1px solid #ccc;border-radius:4px;cursor:pointer;", "→" }
            button { style: "padding:4px 8px;border:1px solid #ccc;border-radius:4px;cursor:pointer;", "←" }
        }
        div { style: "width:120px;border:1px solid #e2e2ea;border-radius:4px;padding:8px;font-size:14px;",
            div { style: "padding:4px 0;", "Item 2" }
        }
    }
}

API

Property	Description	Type	Default
source	Source data	Vec<TransferItem>	-
target	Target data	Vec<String>	-