Recipient Chip

Beta

Get Ritla UI

A person to pay: a chip with the name and last four, or a big avatar over the first name for “Send again”.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add recipient-chip
Also works with shadcn: npx shadcn@latest add @ritla/recipient-chip
Dependencies it brings
@base-ui/react@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

recipient-chip.tsx

import { ChipGroup } from "@/components/ui/account-chip";import { RecipientChip } from "@/components/ui/recipient-chip";<ChipGroup aria-label="Select the recipient">  <RecipientChip value="khaled" name="Khaled Omar" detail="•• 7544" /></ChipGroup>

API reference

RecipientChip

Prop	Type	Default	Description
`value`	`string`	None	This chip's value in its ChipGroup.
`name / src`	`string`	None	The person's name (initials when there is no photo) and photo.
`detail`	`ReactNode`	None	The account's last four, under the name (Chip).
`badge`	`IconComponent`	`BankIcon`	The bank or wallet badge on the avatar.
`layout`	`"chip" \| "stacked"`	`"chip"`	Figma's Layout.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowLeftArrowRight`	Moves to the previous or next chip and selects it (ArrowLeft is next in RTL).
`Tab`	Moves into the row, to the chosen chip, and out again.

ARIA

Stacked shows the first name but is named by the full name.
A radio group, like Account chip.

Arabic and RTL notes

Mirrors

The avatar moves to the right; the bank badge sits at its bottom left.

Does not mirror

The last four stay left to right.

Numerals: Arabic names show one Arabic letter as initials, from Avatar.
Arabic typography: label-14 Medium (Chip) or label-12 Medium (Stacked).