FORM
CsvField
CsvField turns a local CSV selection into a guided column-mapping and preview workflow with deterministic copy.
PLAYGROUND
Import a contact list
Choose a CSV, map the required output columns, review a compact preview, and confirm the import only after the mapping is valid.
Match each required field to a column from the selected file before importing.
Required mappings are explicit, so a missing header becomes a visible correction instead of a silent column shift.
CsvField buttonText:"Upload contacts CSV" modalTitle:"Map contact columns" instructions:"Match each required field to a column from the selected file before importing." cancelText:"Keep editing" confirmText:"Confirm contacts" clearText:"Remove file" previewTitle:"Contact preview" previewRows:4 previewPageSize:8 variant:"outlined" scheme:"primary" size:"lg"
csvColumn name:"email" label:"Email address"
csvColumn name:"name" label:"Full name"
csvColumn name:"company" label:"Company"PREVIEW AND MAPPING
Shape the review step
The field can show a short preview for quick imports or a larger page size for operational reviews.
Map the source headers to the product contract.
This field intentionally omits column mapping for a raw file handoff.
CsvField buttonText:"Import product catalog" modalTitle:"Map catalog columns" instructions:"Map the source headers to the product contract." previewTitle:"Product rows" showPreview:true previewRows:3 previewPageSize:12 multiple:true variant:"soft" scheme:"success" size:"md"
csvColumn name:"sku" label:"SKU"
csvColumn name:"title" label:"Product title"
csvColumn name:"price" label:"Unit price"
CsvField buttonText:"Select audit export" modalTitle:"Review audit headers" instructions:"This field intentionally omits column mapping for a raw file handoff." previewTitle:"Audit rows" showPreview:false multiple:false variant:"ghost" scheme:"muted" size:"sm"STATES AND SCALE
Keep the intake legible
Use errorText for parse or mapping feedback and size to match the surrounding form density.
Map each required column to the corresponding column from the CSV file:
Map each required column to the corresponding column from the CSV file:
Map each required column to the corresponding column from the CSV file:
Map each required column to the corresponding column from the CSV file:
Map each required column to the corresponding column from the CSV file:
BEHAVIOR
A local, reviewable import
Web parses the selected CSV locally; native targets keep the same mapping and preview model while using target-owned picker hooks.
COLUMNS
Explicit contract
Each csvColumn declares a required output name and optional visible label.
PREVIEW
Bounded rows
previewRows and previewPageSize keep review surfaces compact and predictable.
VALIDATION
Visible errors
Delimiter detection, missing headers, and mapping issues stay inside the generated field flow.
API
Props
CsvField also accepts the applicable common spacing, sizing, typography, visibility, accessibility, and shadow props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||