Trading

Order Form

Buy/sell order entry with limit/market toggle, price and amount fields, and a computed total. Works controlled or uncontrolled and emits an onSubmit callback.

Preview

Fullscreen

Source

Copy this file to components/trading/order-form.tsx

tsx

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export type OrderSide = 'buy' | 'sell'
export type OrderType = 'limit' | 'market'

export interface OrderFormValues {
  side: OrderSide
  type: OrderType
  price: number
  amount: number
}

export interface OrderFormProps {
  symbol: string
  side?: OrderSide
  onSideChange?: (side: OrderSide) => void
  orderType?: OrderType
  onOrderTypeChange?: (type: OrderType) => void
  price?: number
  onPriceChange?: (price: number) => void
  amount?: number
  onAmountChange?: (amount: number) => void
  onSubmit?: (values: OrderFormValues) => void
  className?: string
}

// Works controlled (pass value + onChange) or uncontrolled (internal state).
// Buy/sell tabs, limit/market toggle, computed total, and local validation.

Props

Prop	Type	Default	Description
symbol*	string	—	Trading pair, e.g. "BTC/USDT"
side	'buy' \| 'sell'	—	Controlled side; omit for internal state
onSideChange	(side) => void	—	Called when the side tab changes
orderType	'limit' \| 'market'	—	Controlled order type
onOrderTypeChange	(type) => void	—	Called when the order type changes
price	number	—	Controlled price value
onPriceChange	(price) => void	—	Called when the price input changes
amount	number	—	Controlled amount value
onAmountChange	(amount) => void	—	Called when the amount input changes
onSubmit	(values: OrderFormValues) => void	—	Called on valid submit
className	string	—	Additional CSS classes