[hold for payment 2025-11-07] [$1000] Add clearer icons to select lists (checkboxes and radios)

[dubielzyk-expensify]

Problem

When users are presented with options on a screen today it can often be hard to know whether they can choose multiple options or just one. In some instances options don't even seem clickable.

Solution

Let's change selection lists (multi and single choice) to feature checkboxes and radio buttons:

As for the icon, a note is that the previous radio checkmark was 28px, where the new one is 20x20:

Notes:

• We have quite a few of these in the product so let's make test builds and do thorough testing
• There should be no active state background color anymore

cc @Expensify/design @JmillsExpensify @trjExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947149478041565126
• Upwork Job ID: 1947149478041565126
• Last Price Increase: 2025-07-21
• Automatic offers:
• ChavdaSachin | Contributor | 108288853

Issue Owner

Current Issue Owner: @

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021947149478041565126

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[mkzie2]

🚨 Edited by proposal-police: This proposal was edited at 2025-07-21 13:46:47 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add clearer icons to select lists (checkboxes and radios)

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

1. For InviteMemberListItem, we should display a square checkbox if multiple selection is allowed, and a circle checkbox if only a single item can be selected.

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 156 in 1d3b6b1

{!!shouldShowCheckBox && (

App/src/components/SelectionList/RadioListItem.tsx

Line 10 in 1d3b6b1

function RadioListItem<TItem extends ListItem>({

2. For all places that we're using RadioListItem, replace with SingleSelectListItem if it's a single choice and replace with MultiSelectListItem if it's multiple choice

OPTIONAL: We can create a solution within BaseListItem and control the checkbox using the shouldShowCheckbox prop. We need to verify that this prop is passed correctly in all instances where SelectionList is used. With this solution, we will remove the checkmark here and replace it with a checkbox with isChecked prop is true if the item is selected.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @mkzie2 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[JmillsExpensify]

Looks good to me. I agree that we're overdue to clean this up.

[shawnborton]

Looks great, excited for this!

We might also want to note that this is basically already implemented for the Reports page filters, cc @JS00001 - I'm not sure how it was built, but it seems like these components already exist in the product, and we just need to convert older instances into these new instances?