KvalityUI

AmountPicker

Ввод суммы крупным числом с пресетами.

Живой код — редактируйте
function Example() {
  const [amount, setAmount] = useState('1000');
  const tooSmall = Number(amount) > 0 && Number(amount) < 100;
  return (
    <AmountPicker
      className="w-full max-w-md"
      label="Сумма пополнения"
      value={amount}
      onValueChange={setAmount}
      options={[
        { key: '500', label: '500 ₽', value: '500' },
        { key: '1000', label: '1 000 ₽', value: '1000' },
        { key: '5000', label: '5 000 ₽', value: '5000' },
        { key: 'all', label: 'Всё', value: '12400', accent: true }
      ]}
    >
      {tooSmall && (
        <span className="text-12-regular text-intent-critical-fg">
          Минимальная сумма 100 ₽
        </span>
      )}
    </AmountPicker>
  );
}

render(<Example />);

Пропсы

Prop

Type

On this page