Selectable Tile

Beta

Get Ritla UI

A card that works as a radio or a checkbox, for choosing an account, a plan, a card or a delivery option.

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

selectable-tile.tsx

import { SelectableTile, SelectableTileGroup } from "@/components/ui/selectable-tile";<SelectableTileGroup label="Pay from" defaultValue="current">  <SelectableTile value="current" icon={BankIcon} description="JO94 •••• 0302">Current account</SelectableTile></SelectableTileGroup>

Examples

Vertical, checkboxes

A grid of two to four, choosing any number.

EnglishMirroredArabic

Get the code

LTR →

API reference

SelectableTileGroup

Prop	Type	Default	Description
`control`	`"radio" \| "checkbox"`	`"radio"`	Figma's Control.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Figma's Layout.
`value / defaultValue / onValueChange`	`string \| string[]`	None	One value for radio, an array for checkbox.
`label / required / helperText / error / disabled / name`	`…`	None	As on the Radio group.

SelectableTile

Prop	Type	Default	Description
`children`	`ReactNode`	None	Figma's Title.
`description`	`ReactNode`	None	Figma's Show description.
`icon`	`IconComponent \| ReactNode`	None	Figma's Show icon.
`trailing`	`ReactNode`	None	Figma's Show trailing: an amount or a price at the end.
`value / disabled`	`string / boolean`	None	The tile's value in its group.

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
`Tab`	To the group (radio) or each tile (checkbox).
`ArrowDownArrowUpArrowRightArrowLeft`	Between radio tiles, in reading order.
`Space`	Selects the tile.

ARIA

The whole tile is the label and the target; its title and description name the control.
A disabled tile stays visible, so people know the choice exists.

Arabic and RTL notes

Mirrors

The icon starts the tile on the right and the control ends it on the left.

Does not mirror

Masked numbers and amounts stay left to right.

Numerals: The amount in trailing follows your formatting.
Arabic typography: body-16 Medium for the title, body-14 for the description.