Expense
Review money out
Native HTML/CSS/TypeScript · isolated UI prototype
Expense review
Material 3 behavior and geometry recreated without Angular or a component framework. No login, API, or bookkeeping data is connected.
xBoox component catalog
Reusable mobile component reference
These examples share the Expense form’s semantic colors, typography, shape, spacing, focus, disabled, error, and positive-state rules.
Field geometry contractThe acceptance rules for every xBoox mobile field
- Container
- 64px high, 12px radius
- Leading edge
- Label and value both start 16px from the outline
- Value alignment
- Left aligned and vertically centred
- Trailing icon
- 20px icon, centred, 16px from the outline
- Outline
- 1px default, 2px focus, real fieldset/legend notch
- Money
- Currency prefix and amount separated by 4px
- Selection
- Phone selection opens a modal bottom sheet
- Spacing
- 20px desktop and 24px phone between fields
ActionsPrimary and supporting decisions
Fields and validationOne geometry system for entry and selection
Selection controlsTouch targets remain at least 44px
Status and feedbackBookkeeping states never rely on color alone
Waiting match
Posted
Needs review
Failed
Import progress
64%
Loading data
Ready to postRequired fields are complete.
Check the amountTotal must be greater than zero.
Cards, navigation, and overlaysCommon xBoox application structures
This month$2,481.3018 expense transactions
Theme reference
Pro semantic color roles
PrimaryActions
Primary containerSelected
SecondarySupporting
TertiaryAccent
ErrorDestructive
PositiveCompleted
SurfaceCanvas