Horizontal Field
thilo custom
Click-to-edit field row. Icon + label (140px left), value right. Click the value to edit — blur auto-saves.
@/components/ui/horizontal-fieldIn context — click any value to edit
Company info
Company Name
Thilo GmbH
Classification
Company
EIN
716263123
Phone
—
E-mail
—
City
Berlin
Street
—
renderEdit prop — custom edit control
Replace the default Input with any control — NativeSelect, DatePicker, etc. The save and cancel callbacks wire up automatically.
Ticket metadata
Status
Open
Assignee
Dragana V.
Website
—
States
| State | Description | Token / class |
|---|---|---|
| Idle | Label left + value right. Hover highlights the row. | hover:bg-accent/30 |
| Editing | Value replaced by an Input (or renderEdit). Blur = save. | Input focus-visible:ring-1 |
| Empty | Value is empty string — shows a faint placeholder dash. | text-muted-foreground/30 |
Props
| Prop | Type | Description |
|---|---|---|
| icon | LucideIcon | Lucide icon shown left of the label (16px, text-muted-foreground/50) |
| label | string | Field label — 140px wide left column, truncated if needed |
| value | string | Current value displayed on the right |
| onSave | (value: string) => void | Called when the user confirms a new value (blur or Enter) |
| renderEdit | (save, cancel) => ReactNode | Optional — replace the default Input with a custom editor (NativeSelect, etc.) |
| className | string | Applied to the row wrapper — min-h-8 grid by default |
Used in ticket detail panels and partner company info pages. For table cell editing use InlineCellInput instead.
On this page