Tally UI

PaymentSelector

Radio-style selector for choosing a payment method

Import

import { PaymentSelector } from '@tallyui/components';

Usage

<PaymentSelector
  methods={[
    { id: 'cash', label: 'Cash' },
    { id: 'card', label: 'Credit Card' },
  ]}
  selected={selectedMethod}
  onSelect={setSelectedMethod}
/>

A vertical list of PaymentMethodCard items where exactly one can be selected at a time. Manages the selected state visually and calls onSelect with the method ID when tapped.

Props

PropTypeDefaultDescription
methodsPaymentMethod[]requiredAvailable payment methods
selectedstringrequiredID of the currently selected method
onSelect(id: string) => voidrequiredCalled with method ID on selection
classNamestring---Override container styles

PaymentMethod

interface PaymentMethod {
  id: string;
  label: string;
  icon?: ReactNode;
}

Live demo

On this page