‹ components

OrderTypeTabs

draftv0.9.0·open in canvas

Scrollable order-type selector for trading forms: market, limit, and advanced order modes in one compact strip.

Installnpx shadcn add @cids/order-type-tabs
Live demo

Motion · tap to replay

honors reduced-motion

Targeted color/border/transform transition at 150ms. Active press scales to 0.98 and is removed for disabled buttons.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { OrderTypeTabs, type OrderType } from "@/design-system";

const [type, setType] = useState<OrderType>("limit");

<OrderTypeTabs value={type} onValueChange={setType} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

defaultactivehoverpresseddisabledscroll overflowkeyboard roving focus.

Scrollable order-type selector for trading forms: market, limit, and advanced order modes in one compact strip.

Anatomy

+ Limit + + Market + + Stop-Market * + + Stop-Limit * + + Iceberg * + ...
  active: raised surface + fg text
  advanced: brand dot

Props

PropTypeDefaultNotes
valueOrderType--Controlled active order type.
onValueChange(value: OrderType) => void--Fires on click or keyboard selection.
optionsOrderTypeOption[]DEFAULT_ORDER_TYPE_OPTIONSUse to hide/disable unsupported engine types.
aria-labelstringOrder typeNames the tablist.
classNamestring--cn-merged.

OrderTypeOption has value, label, optional description, group, disabled, and icon.

Motion

Targeted color/border/transform transition at 150ms. Active press scales to 0.98 and is removed for disabled buttons.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.