- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
A flexible fields component system that displays multiple data fields in responsive layouts. Supports both read-only display and editable form inputs, with optional drag-and-drop reordering and dynamic field management.
Basic Read-Only Display
Display product attributes or data fields in a clean, organized grid layout.
PRD-12345
$299.99
48 units
Electronics
Editable Form Fields
Create dynamic forms with multiple field types including text, email, tel, and more.
Three Column Layout
Display more fields in a compact three-column grid that adapts to mobile screens.
$142,500
1,284
3.2%
$111
892
+12.5%
Single Column Stack
Perfect for mobile-first layouts or narrow containers where fields should stack vertically.
With Descriptions and Errors
Add helpful descriptions and display validation errors for better user experience.
Choose a unique username (3-20 characters)
Select Fields
Use dropdown selects for predefined options.
Compact Variant
Use the compact variant for denser layouts with reduced spacing.
Props
Fields Props
| Prop | Type | Default | Description |
|---|---|---|---|
fields | FieldItemData[] | - | Array of field objects to display |
layout | "grid" | "stack" | "inline" | "grid" | Layout strategy for fields |
columns | 1 | 2 | 3 | 4 | "auto" | 2 | Number of columns for grid layout |
gap | "none" | "sm" | "md" | "lg" | "xl" | "md" | Spacing between fields |
variant | "editable" | "readonly" | "compact" | "editable" | Display mode for all fields |
size | "default" | "sm" | "lg" | "default" | Size variant for all fields |
orientation | "vertical" | "horizontal" | "vertical" | Label/input orientation |
enableReordering | boolean | false | Enable drag-and-drop reordering |
enableAddRemove | boolean | false | Enable add/remove field buttons |
showSeparators | boolean | false | Show separators between fields |
onChange | (fields) => void | - | Called when fields array changes |
onFieldChange | (id, value) => void | - | Called when a field value changes |
onFieldsReorder | (fields) => void | - | Called after fields are reordered |
onFieldAdd | () => FieldItemData | - | Function that returns new field data |
onFieldRemove | (id) => void | - | Called when a field is removed |
addFieldLabel | string | "Add Field" | Label for add field button |
showToolbar | boolean | enableAddRemove | Show the toolbar |
toolbarActions | ReactNode | - | Custom toolbar actions |
className | string | - | Additional CSS classes |
classNames | object | - | CSS classes for sub-components |
FieldItemData Interface
| Property | Type | Description |
|---|---|---|
id | string | number | Unique identifier for the field |
label | string | Field label text |
value | string | number | Field value |
description | string | Helper text below the field |
placeholder | string | Placeholder text for inputs |
type | "text" | "number" | "email" | "tel" | "url" | "date" | "textarea" | "select" | Input type |
required | boolean | Mark field as required |
disabled | boolean | Disable field interaction |
error | string | Error message to display |
options | Array<{label: string, value: string}> | Options for select type |
rows | number | Number of rows for textarea |
render | (field) => ReactNode | Custom render function |