[Due for payment 2026-10-07] [CFI] Update the Manual create expense form to use dropdown-style rows and a compact add-receipt button #100221

Follow-on from https://github.com/Expensify/Expensify/issues/598528 & #93854.

Background

Today, the Manual tab of Create expense mixes three different row treatments in one form:

• Amount, Merchant, Description, and Date are bordered fields.
• Category, the tag rows, the tax rows, Attendees, and Report are borderless push rows with a right caret.
• Add receipt is a full-width bordered button above Amount, and Reimbursable is a toggle row between Attendees and Report.

Two problems come out of that. Fields the user is filling in look nothing alike, so the form reads as several unrelated lists stacked together rather than one set of details. The right caret is also the same affordance we use to navigate away from a page, so a row that just needs a value picked looks like it leaves the flow.

This issue gives every selectable row on the Manual tab the same bordered treatment with a down caret, moves the add-receipt action to a compact button beside Amount, and moves Reimbursable below Report.

Scope

• Move the add-receipt action from a full-width button above Amount to a compact icon button immediately to the right of the Amount field.
• When a receipt is attached, remove that button and show the existing larger receipt preview above Amount, exactly as it renders today.
• Change the section header above the expense fields to read Expense details when there is no receipt and Receipt when there is.
• Remove the pill border and background from the Flip and currency buttons inside Amount, leaving the icon and label.
• Give Category, every tag row, the tax rows, Attendees, and Report a bordered container with a down caret on the right, matching the existing Amount and Merchant treatment.
• Group the toggle rows at the bottom of the form: Reimbursable moves below Report, and Billable sits below Reimbursable.
• No change to what any row is labeled, what it does on tap, or where it routes. This is a visual treatment change only.

Product and design details

Applicability

This applies to the Manual tab of Create expense only, on all platforms: iOS, Android, mWeb, and desktop/web. Scan, Per diem, and Time keep today's treatment. We are deliberately not carrying the change across the other tabs in this issue so the pattern can be reviewed in one place first.

Add receipt

The full-width Add receipt button above Amount is removed. In its place, a compact icon button sits immediately to the right of the Amount field, vertically centered against it. The button shows the add-receipt icon only, with no label. Amount shortens to make room for it.

Tapping the button opens the same receipt-attachment flow the full-width button opens today. No new component, and no change to the camera, gallery, or file-picker options it offers.

When a receipt is attached, the compact button is removed and the existing larger receipt preview renders above Amount, with Amount returning to full width. The preview itself is unchanged: same size, same treatment, same tap behavior for viewing and replacing the receipt as today.

Section header

The header above the expense fields is new, and its copy depends on whether a receipt is attached:

• No receipt: the header reads Expense details, and Amount is the first thing under it.
• Receipt attached: the header reads Receipt, and the receipt preview is the first thing under it, followed by Amount.

There is one header, not two. It swaps copy in place when a receipt is added or removed. The To header above the workspace row already exists and is unchanged.

Amount field

Flip and the currency button (e.g. USD) keep their position, order, and behavior inside the Amount field. We remove only their pill border and background, so each renders as its icon plus its label against the field. Tap targets stay the same size, so the buttons are no harder to hit than they are today.

Selectable-row treatment

Category, every tag row, the tax rows, Attendees, and Report each move from a borderless push row with a right caret to a bordered container with a down caret on the right. The container matches the Amount, Merchant, Description, and Date fields already on the form, so every row in the section shares one treatment.

Each row renders in one of two states, which is the same pattern the text fields already use:

• No value selected: the field name renders as placeholder text on a single line, e.g. Tag. If the field is required and empty, Required renders right-aligned, before the caret.
• Value selected: the field name renders small along the top of the container and the value renders below it, e.g. Category above Meals & Entertainment. Required no longer renders once a value exists.

Attendees renders in the value-selected state by default, since the creator is always an attendee. Its pills keep their current treatment inside the new container.

The down caret is cosmetic. Tapping a row opens the same selector page or RHP it opens today, with the same search, the same list, and the same save behavior. We are not building an inline dropdown, and no routing changes.

Row order

Row order is unchanged apart from the toggle rows, which group at the bottom of the form. Reimbursable moves from between Attendees and Report to below Report, and Billable sits below Reimbursable. Both stay borderless label-plus-toggle rows and do not get the bordered treatment, since a toggle is not a value to pick.

The form's last three rows are therefore Report, Reimbursable, then Billable, followed by the Create expense button. Billable only renders on workspaces with billable expenses enabled, which is true today, so on most workspaces Reimbursable is the last row.

Rows only render when the workspace enables them, which is also true today. The tax rows keep their current position after the tag rows, and a workspace with more than one tag list still gets one row per list, each with the new treatment.

QA Examples

• A user opens Create expense on the Manual tab with no receipt: the header reads Expense details, Amount renders with Flip and USD as borderless icon-and-label buttons and a compact receipt icon button to its right, and Category, the tag row, Attendees, and Report each render as bordered rows with a down caret.
• The same user attaches a receipt: the compact receipt button is removed, Amount returns to full width, the header changes to Receipt, and the existing larger preview renders between the header and Amount.
• The user then removes the receipt: the header returns to Expense details, the preview is removed, and the compact receipt button comes back beside Amount.
• A user on a workspace that requires a category, before picking one: the Category row shows Category as placeholder text with Required right-aligned before the down caret. After picking Meals & Entertainment, the row shows Category small on top with Meals & Entertainment below, and Required is gone.
• A user on a workspace with two tag lists named Department and NetSuite Vendor Tag (Add to 10k+ expenses): both render as bordered down-caret rows, each keeping its own list name as the row label.
• A user taps the Report row: the same report selector opens as today, they pick a report, and they land back on the form with Report showing the selected report's name. The Reimbursable toggle renders directly below it.
• A user on a workspace with billable expenses enabled: the form's last three rows read Report, then Reimbursable, then Billable. On a workspace without billable expenses, Reimbursable is the last row.
• A user opens Create expense and switches to the Scan tab: that tab renders exactly as it does today, with no bordered rows, no down carets, and Reimbursable in its current position.