BENEFICIARY SELECT
The Beneficiary Select component is an interactive UI element that allows users to choose a specific individual (beneficiary) for a healthcare service.
TYPES OF BENIF SELECT
You can use the Beneficiary Select component in two ways — as a Chip Variant or a Selector Card Variant.
The Chip Variant is compact for quick identification in tight spaces, while the Selector Card Variant provides detailed beneficiary info for decision-making flows.
CHIP
A compact pill-shaped variant for quick beneficiary identification in tight spaces like headers or inline flows.
Interaction
Used in scenarios where a quick, inline reference to the beneficiary is needed. The compact chip helps users identify or switch between beneficiaries effortlessly within tighter spaces like headers or inline flows.
Best practice is to have one chip pre-selected by default — representing the most common or preferred beneficiary. If the user wants to change the selection, they can tap another chip, automatically deselecting the previous one to ensure only one remains active at a time.
SELECTOR CARD
Used in decision-making flows where users can select a single beneficiary at a time by tapping on a card.
Interaction
Selector cards are unselected by default. Users can tap or click to select one option at a time, and selecting a new card will automatically deselect the previously chosen one.
BEST PRACTICE
Always use chips as part of a set; they should not stand alone.
Place the most frequently selected chip at the start for easy access.
Don't let the list of chips get too long.
AVAILABILITY