Data Transfer Controls
Import and export control cluster with optional scope selector and compact menu mode.
When To Use
- Use Data Transfer Controls when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
scopeValue, onScopeChange, scopeOptions, scopePlaceholder, actions, compact
Example Code
import { DataTransferControls } from "@hilum/ui"
import { Download, Upload } from "lucide-react"
<DataTransferControls
scopeValue={scope}
onScopeChange={setScope}
scopeOptions={[
{ value: "visible", label: "Visible rows" },
{ value: "selected", label: "Selected rows" },
{ value: "all", label: "All records" },
]}
actions={[
{ label: "Import CSV", shortLabel: "Import", icon: <Upload />, onSelect: importCsv },
{ label: "Export CSV", shortLabel: "Export", icon: <Download />, onSelect: exportCsv },
]}
/>Toolbar
Scoped actions
Pair import/export actions with a clear data scope.
No action selected