Expense Type Selector
Component Detail
Description
A validated picker widget that renders the organisation-configured catalogue of expense types (km allowance, toll, parking, public transport, driver honoraria). Selecting a type that conflicts with an already-selected type disables the conflicting option and surfaces a plain-language explanation. Meets WCAG 2.2 AA touch-target and contrast requirements for all interactive elements.
expense-type-selector
Sources & reasoning
A dedicated picker widget is required to enforce the hard requirement that invalid expense type combinations are technically impossible to submit at the UI level. Encapsulating mutual-exclusion display logic here keeps the parent travel expense registration form clean and ensures WCAG compliance is consistently applied to this interaction.
No source references — this artifact was included based on reasoning alone (see above).
Responsibilities
- Render available expense types from the offline-cached organisation catalogue
- Enforce mutual-exclusion rules by disabling conflicting options on selection
- Display plain-language conflict explanations when an option is disabled
- Notify the parent expense registration form of the current type selection
- Meet WCAG 2.2 AA minimum 24x24 CSS-pixel touch targets for all picker controls
Interfaces
ExpenseTypeSelector(expenseTypes, selectedTypes, onTypeSelected, onConflictExplained)
selectedTypes -> List<String>
onTypeSelected(String typeId) -> void
onConflictExplained(String explanation) -> void
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (2)
Data entities managed by this component