Bet Input

A stake field with quick multipliers and a live return. Stakes are integer minor units and the max is clamped to the balance, so "all in" cannot stake money that is not there.

src/components/ui/bet-input.tsx

About

From the component's own source, where it was written.

A stake field with quick multipliers and a payout preview.

Potential payout is shown before the button, computed from the stake and the odds. A stake box with no payout makes people work out the return in their head at exactly the moment they are least inclined to.

The balance ceiling is enforced on the field, not on submit. "Insufficient balance" after a confirm dialog is a worse experience than a max that simply cannot be exceeded, and half and double clamp rather than overshoot.

All amounts are integer minor units, so repeated halving cannot accumulate a float error into a stake that does not match the balance.

Install

npx astralyx-ui add bet-input

Usage

import { BetInput } from '@/components/ui/bet-input'

<BetInput stake={stake} onStakeChange={setStake} balance={balance} odds={2.4} onPlace={place} />

Composer

Change the props and the source below follows.

StakeBalance US$247.50

Potential payout: US$24.00

Props

odds

balance (minor)

disabled

tsx

<BetInput
  stake={stake}
  onStakeChange={setStake}
  balance={24750}
  odds={2.4}
  onPlace={place}
/>

Examples

Stake with quick actions

tsx

const [stake, setStake] = useState(1000)

<BetInput stake={stake} onStakeChange={setStake} balance={24750} odds={2.4} onPlace={place} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`BetInput`

A stake field with quick multipliers and a payout preview.

Extends Omit<ComponentProps<'div'>, 'children' | 'onChange'>.

Prop	Type	Default	Description
stake	number	required	Minor units. Controlled, because the surrounding game usually owns it.
onStakeChange	(stake: number) => void	—	—
balance	number	—	Caps every quick action. Half and max are computed against it, so they can never exceed the funds available.
odds	number	—	Decimal odds. The potential return is shown live beneath the field — nobody should be doing that multiplication in their head.
min	number	—	Table limits. Enforced at the control rather than rejected on submit.
max	number	—	Table limits. Enforced at the control rather than rejected on submit.
currency	string	'USD'	—
locale	string	'en-GB'	—
onPlace	() => void	—	Renders the place button. Omit for a stake field embedded in a larger slip.
action	ReactNode	'Place bet'	—
stakeLabel	ReactNode	'Stake'	Heading and accessible name for the stake field.
maxLabel	ReactNode	'Max'	The "stake everything" quick action.
payoutLabel	ReactNode	'Potential payout'	—
overBalanceNote	ReactNode	'Stake is above your balance.'	—
disabled	boolean	false	—