Account Chip

Beta

Get Ritla UI

Choose the card or account to pay from, in a row that scrolls; the chosen chip gets a dark outline.

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 account-chip
Also works with shadcn: npx shadcn@latest add @ritla/account-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

account-chip.tsx

import { AccountChip, ChipGroup } from "@/components/ui/account-chip";<ChipGroup aria-label="Pay from" defaultValue="card">  <AccountChip value="card" title="•• 8152" balance="JOD 2,450.750" />  <AccountChip value="savings" kind="account" title="Savings" balance="JOD 8,120.000" /></ChipGroup>

API reference

ChipGroup

Prop	Type	Default	Description
`aria-label`	`string`	None	Names the choice (“Pay from”).
`value / defaultValue / onValueChange`	`string`	None	The chosen chip.
`name`	`string`	None	Form field name.

AccountChip

Prop	Type	Default	Description
`value`	`string`	None	This chip's value.
`kind`	`"card" \| "account"`	`"card"`	Figma's Kind: CreditCard or Bank in the dark chip.
`icon`	`IconComponent`	None	Another icon.
`title / balance`	`ReactNode`	None	The last four or the account name, and the balance.

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

A radio group: one chip is chosen, and screen readers say “radio, 1 of 3, checked”.
The outline changes width as well as colour, never colour alone.

Arabic and RTL notes

Mirrors

The icon chip moves to the right; the row scrolls from the right.

Does not mirror

Balances stay one left-to-right run.

Numerals: Figures the app formats (prices, balances) arrive as text; the component keeps them left to right with <bdi dir="ltr">.
Arabic typography: label-14 Medium for the title, numeric-12 for the balance.