From bb6eea108701b14cd8853383b5e0b0cc29c2e4fa Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 17 Aug 2023 09:35:14 +0100
Subject: [PATCH] chore: switch components to use trading versions

---
 .../market-selector/market-selector.tsx       |   4 +-
 .../welcome-dialog/telemetry-approval.tsx     |   4 +-
 libs/accounts/src/lib/transfer-form.tsx       |  54 ++++++----
 libs/assets/src/lib/asset-option.tsx          |   6 +-
 .../src/lib/filters/date-range-filter.tsx     |   4 +-
 .../deal-ticket/deal-ticket-limit-amount.tsx  |  26 +++--
 .../deal-ticket/deal-ticket-market-amount.tsx |  12 ++-
 .../deal-ticket/deal-ticket-size-iceberg.tsx  |  26 ++---
 .../deal-ticket/deal-ticket-stop-order.tsx    | 102 +++++++++---------
 .../components/deal-ticket/deal-ticket.tsx    |  18 ++--
 .../deal-ticket/expiry-selector.tsx           |  16 +--
 .../deal-ticket/time-in-force-selector.tsx    |  18 ++--
 .../components/deal-ticket/type-selector.tsx  |   6 +-
 libs/deposits/src/lib/deposit-form.tsx        |  54 +++++-----
 .../node-switcher/node-switcher.tsx           |  14 +--
 .../src/components/node-switcher/row-data.tsx |   4 +-
 .../order-list/order-edit-dialog.tsx          |  30 +++---
 libs/ui-toolkit/src/components/index.ts       |  20 ++--
 .../trading-checkbox/checkbox.spec.tsx        |  16 +--
 .../trading-checkbox/checkbox.stories.tsx     |  12 ++-
 .../components/trading-checkbox/checkbox.tsx  |   6 +-
 .../trading-form-group/form-group.spec.tsx    |  10 +-
 .../trading-form-group/form-group.tsx         |   6 +-
 .../trading-form-group/from-group.stories.tsx |  16 +--
 .../trading-input-error/input-error.spec.tsx  |   4 +-
 .../input-error.stories.tsx                   |   6 +-
 .../trading-input-error/input-error.tsx       |   6 +-
 .../components/trading-input/input.spec.tsx   |   4 +-
 .../trading-input/input.stories.tsx           |   6 +-
 .../src/components/trading-input/input.tsx    |   8 +-
 .../radio-group.stories.tsx                   |  18 ++--
 .../trading-radio-group/radio-group.tsx       |  11 +-
 .../components/trading-select/select.spec.tsx |  20 ++--
 .../trading-select/select.stories.tsx         |  34 +++---
 .../src/components/trading-select/select.tsx  |  13 +--
 .../src/components/trading-text-area/index.ts |   1 -
 .../trading-text-area/text-area.spec.tsx      |  10 --
 .../trading-text-area/text-area.stories.tsx   |  31 ------
 .../trading-text-area/text-area.tsx           |  25 -----
 .../src/connect-dialog/connect-dialog.tsx     |  10 +-
 .../connect-dialog/view-connector-form.tsx    |  16 +--
 libs/withdraws/src/lib/withdraw-form.tsx      |  40 ++++---
 42 files changed, 369 insertions(+), 378 deletions(-)
 delete mode 100644 libs/ui-toolkit/src/components/trading-text-area/index.ts
 delete mode 100644 libs/ui-toolkit/src/components/trading-text-area/text-area.spec.tsx
 delete mode 100644 libs/ui-toolkit/src/components/trading-text-area/text-area.stories.tsx
 delete mode 100644 libs/ui-toolkit/src/components/trading-text-area/text-area.tsx

diff --git a/apps/trading/components/market-selector/market-selector.tsx b/apps/trading/components/market-selector/market-selector.tsx
index d182a814f..59ec08fc5 100644
--- a/apps/trading/components/market-selector/market-selector.tsx
+++ b/apps/trading/components/market-selector/market-selector.tsx
@@ -2,7 +2,7 @@ import { t } from '@vegaprotocol/i18n';
 import uniqBy from 'lodash/uniqBy';
 import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
 import {
-  Input,
+  TradingInput,
   TinyScroll,
   VegaIcon,
   VegaIconNames,
@@ -57,7 +57,7 @@ export const MarketSelector = ({
         />
         <div className="text-sm grid grid-cols-[2fr_1fr_1fr] gap-1 ">
           <div className="flex-1">
-            <Input
+            <TradingInput
               onChange={(e) =>
                 setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
               }
diff --git a/apps/trading/components/welcome-dialog/telemetry-approval.tsx b/apps/trading/components/welcome-dialog/telemetry-approval.tsx
index c27506dfa..0fd49c983 100644
--- a/apps/trading/components/welcome-dialog/telemetry-approval.tsx
+++ b/apps/trading/components/welcome-dialog/telemetry-approval.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from '@vegaprotocol/ui-toolkit';
+import { TradingCheckbox } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 
@@ -7,7 +7,7 @@ export const TelemetryApproval = ({ helpText }: { helpText: string }) => {
   return (
     <div className="flex flex-col py-3">
       <div className="mr-4" role="form">
-        <Checkbox
+        <TradingCheckbox
           label={<span className="text-lg pl-1">{t('Share usage data')}</span>}
           checked={isApproved}
           name="telemetry-approval"
diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx
index 7aa0dcc0b..a3e81c4c7 100644
--- a/libs/accounts/src/lib/transfer-form.tsx
+++ b/libs/accounts/src/lib/transfer-form.tsx
@@ -9,13 +9,13 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import {
   Button,
-  FormGroup,
-  Input,
-  InputError,
-  RichSelect,
-  Select,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+  TradingRichSelect,
+  TradingSelect,
   Tooltip,
-  Checkbox,
+  TradingCheckbox,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
 import { normalizeTransfer } from '@vegaprotocol/wallet';
@@ -130,12 +130,16 @@ export const TransferForm = ({
       className="text-sm"
       data-testid="transfer-form"
     >
-      <FormGroup label="Vega key" labelFor="to-address">
+      <TradingFormGroup label="Vega key" labelFor="to-address">
         <AddressField
           pubKeys={pubKeys}
           onChange={() => setValue('toAddress', '')}
           select={
-            <Select {...register('toAddress')} id="to-address" defaultValue="">
+            <TradingSelect
+              {...register('toAddress')}
+              id="to-address"
+              defaultValue=""
+            >
               <option value="" disabled={true}>
                 {t('Please select')}
               </option>
@@ -147,10 +151,10 @@ export const TransferForm = ({
                       {pk}
                     </option>
                   ))}
-            </Select>
+            </TradingSelect>
           }
           input={
-            <Input
+            <TradingInput
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={true} // focus input immediately after is shown
               id="to-address"
@@ -171,12 +175,12 @@ export const TransferForm = ({
           }
         />
         {errors.toAddress?.message && (
-          <InputError forInput="to-address">
+          <TradingInputError forInput="to-address">
             {errors.toAddress.message}
-          </InputError>
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label="Asset" labelFor="asset">
+      </TradingFormGroup>
+      <TradingFormGroup label="Asset" labelFor="asset">
         <Controller
           control={control}
           name="asset"
@@ -186,7 +190,7 @@ export const TransferForm = ({
             },
           }}
           render={({ field }) => (
-            <RichSelect
+            <TradingRichSelect
               data-testid="select-asset"
               id={field.name}
               name={field.name}
@@ -208,15 +212,17 @@ export const TransferForm = ({
                   }
                 />
               ))}
-            </RichSelect>
+            </TradingRichSelect>
           )}
         />
         {errors.asset?.message && (
-          <InputError forInput="asset">{errors.asset.message}</InputError>
+          <TradingInputError forInput="asset">
+            {errors.asset.message}
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label="Amount" labelFor="amount">
-        <Input
+      </TradingFormGroup>
+      <TradingFormGroup label="Amount" labelFor="amount">
+        <TradingInput
           id="amount"
           autoComplete="off"
           appendElement={
@@ -239,11 +245,13 @@ export const TransferForm = ({
           })}
         />
         {errors.amount?.message && (
-          <InputError forInput="amount">{errors.amount.message}</InputError>
+          <TradingInputError forInput="amount">
+            {errors.amount.message}
+          </TradingInputError>
         )}
-      </FormGroup>
+      </TradingFormGroup>
       <div className="mb-4">
-        <Checkbox
+        <TradingCheckbox
           name="include-transfer-fee"
           disabled={!transferAmount}
           label={
diff --git a/libs/assets/src/lib/asset-option.tsx b/libs/assets/src/lib/asset-option.tsx
index 1a7a98135..56014da82 100644
--- a/libs/assets/src/lib/asset-option.tsx
+++ b/libs/assets/src/lib/asset-option.tsx
@@ -1,4 +1,4 @@
-import { Option } from '@vegaprotocol/ui-toolkit';
+import { TradingOption } from '@vegaprotocol/ui-toolkit';
 import type { AssetFieldsFragment } from './__generated__/Asset';
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/i18n';
@@ -28,7 +28,7 @@ export const Balance = ({
 
 export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
   return (
-    <Option key={asset.id} value={asset.id}>
+    <TradingOption key={asset.id} value={asset.id}>
       <div className="flex flex-col items-start">
         <div className="flex flex-row align-baseline gap-2">
           <span>{asset.name}</span>{' '}
@@ -49,6 +49,6 @@ export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
           </span>
         </div>
       </div>
-    </Option>
+    </TradingOption>
   );
 };
diff --git a/libs/datagrid/src/lib/filters/date-range-filter.tsx b/libs/datagrid/src/lib/filters/date-range-filter.tsx
index a2e8d8041..364d8289f 100644
--- a/libs/datagrid/src/lib/filters/date-range-filter.tsx
+++ b/libs/datagrid/src/lib/filters/date-range-filter.tsx
@@ -15,7 +15,7 @@ import {
 } from 'date-fns';
 import { formatForInput } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { InputError } from '@vegaprotocol/ui-toolkit';
+import { TradingInputError } from '@vegaprotocol/ui-toolkit';
 
 const defaultValue: Schema.DateRange = {};
 export interface DateRangeFilterProps extends IFilterParams {
@@ -195,7 +195,7 @@ export const DateRangeFilter = forwardRef(
     }, [value, props]);
 
     const notification = useMemo(() => {
-      const not = error ? <InputError>{error}</InputError> : null;
+      const not = error ? <TradingInputError>{error}</TradingInputError> : null;
       return (
         <div className="ag-filter-apply-panel flex min-h-[2rem]">{not}</div>
       );
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx
index 6691cd12c..327435b88 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx
@@ -1,4 +1,8 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+} from '@vegaprotocol/ui-toolkit';
 import { toDecimal, validateAmount } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
@@ -22,17 +26,17 @@ export const DealTicketLimitAmount = ({
   const renderError = () => {
     if (sizeError) {
       return (
-        <InputError testId="deal-ticket-error-message-size-limit">
+        <TradingInputError testId="deal-ticket-error-message-size-limit">
           {sizeError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
     if (priceError) {
       return (
-        <InputError testId="deal-ticket-error-message-price-limit">
+        <TradingInputError testId="deal-ticket-error-message-price-limit">
           {priceError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
@@ -43,7 +47,7 @@ export const DealTicketLimitAmount = ({
     <div className="mb-2">
       <div className="flex items-start gap-4">
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             label={t('Size')}
             labelFor="input-order-size-limit"
             className="!mb-0"
@@ -60,7 +64,7 @@ export const DealTicketLimitAmount = ({
                 validate: validateAmount(sizeStep, 'Size'),
               }}
               render={({ field, fieldState }) => (
-                <Input
+                <TradingInput
                   id="input-order-size-limit"
                   className="w-full"
                   type="number"
@@ -73,11 +77,11 @@ export const DealTicketLimitAmount = ({
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
         <div className="pt-5 leading-10">@</div>
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             labelFor="input-price-quote"
             label={t(`Price (${quoteName})`)}
             labelAlign="right"
@@ -95,7 +99,7 @@ export const DealTicketLimitAmount = ({
                 validate: validateAmount(priceStep, 'Price'),
               }}
               render={({ field, fieldState }) => (
-                <Input
+                <TradingInput
                   id="input-price-quote"
                   className="w-full"
                   type="number"
@@ -107,7 +111,7 @@ export const DealTicketLimitAmount = ({
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
       </div>
       {renderError()}
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
index a370bc78a..82e003364 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
@@ -4,7 +4,11 @@ import {
   validateAmount,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingInput,
+  TradingInputError,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
 import { isMarketInAuction } from '@vegaprotocol/markets';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { Controller } from 'react-hook-form';
@@ -46,7 +50,7 @@ export const DealTicketMarketAmount = ({
               validate: validateAmount(sizeStep, 'Size'),
             }}
             render={({ field, fieldState }) => (
-              <Input
+              <TradingInput
                 id="input-order-size-market"
                 className="w-full"
                 type="number"
@@ -86,12 +90,12 @@ export const DealTicketMarketAmount = ({
         </div>
       </div>
       {sizeError && (
-        <InputError
+        <TradingInputError
           intent="danger"
           testId="deal-ticket-error-message-size-market"
         >
           {sizeError}
-        </InputError>
+        </TradingInputError>
       )}
     </div>
   );
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
index 40a5480d3..1b69cac2b 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
@@ -4,9 +4,9 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
 import { toDecimal, validateAmount } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
-  FormGroup,
-  Input,
-  InputError,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 
@@ -32,9 +32,9 @@ export const DealTicketSizeIceberg = ({
   const renderPeakSizeError = () => {
     if (peakSizeError) {
       return (
-        <InputError testId="deal-ticket-peak-error-message-size-limit">
+        <TradingInputError testId="deal-ticket-peak-error-message-size-limit">
           {peakSizeError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
@@ -44,9 +44,9 @@ export const DealTicketSizeIceberg = ({
   const renderMinimumSizeError = () => {
     if (minimumVisibleSizeError) {
       return (
-        <InputError testId="deal-ticket-minimum-error-message-size-limit">
+        <TradingInputError testId="deal-ticket-minimum-error-message-size-limit">
           {minimumVisibleSizeError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
@@ -57,7 +57,7 @@ export const DealTicketSizeIceberg = ({
     <div className="mb-2">
       <div className="flex items-center gap-4">
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             label={
               <Tooltip
                 description={
@@ -93,7 +93,7 @@ export const DealTicketSizeIceberg = ({
                 validate: validateAmount(sizeStep, 'peakSize'),
               }}
               render={({ field }) => (
-                <Input
+                <TradingInput
                   id="input-order-peak-size"
                   className="w-full"
                   type="number"
@@ -106,14 +106,14 @@ export const DealTicketSizeIceberg = ({
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
         <div className="flex-0 items-center">
           <div className="flex"></div>
           <div className="flex"></div>
         </div>
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             label={
               <Tooltip
                 description={
@@ -151,7 +151,7 @@ export const DealTicketSizeIceberg = ({
                 validate: validateAmount(sizeStep, 'minimumVisibleSize'),
               }}
               render={({ field }) => (
-                <Input
+                <TradingInput
                   id="input-order-minimum-size"
                   className="w-full"
                   type="number"
@@ -164,7 +164,7 @@ export const DealTicketSizeIceberg = ({
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
       </div>
       {renderPeakSizeError()}
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
index 754bf3a03..dbe61bdf3 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
@@ -10,13 +10,13 @@ import {
 import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
 import {
-  Radio,
-  RadioGroup,
-  Input,
-  Checkbox,
-  FormGroup,
-  InputError,
-  Select,
+  TradingRadio,
+  TradingRadioGroup,
+  TradingInput,
+  TradingCheckbox,
+  TradingFormGroup,
+  TradingInputError,
+  TradingSelect,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
@@ -187,9 +187,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
         }}
       />
       {errors.type && (
-        <InputError testId="stop-order-error-message-type">
+        <TradingInputError testId="stop-order-error-message-type">
           {errors.type.message}
-        </InputError>
+        </TradingInputError>
       )}
 
       <Controller
@@ -199,21 +199,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-      <FormGroup label={t('Trigger')} compact={true} labelFor="">
+      <TradingFormGroup label={t('Trigger')} compact={true} labelFor="">
         <Controller
           name="triggerDirection"
           control={control}
           render={({ field }) => {
             const { onChange, value } = field;
             return (
-              <RadioGroup
+              <TradingRadioGroup
                 name="triggerDirection"
                 onChange={onChange}
                 value={value}
                 orientation="horizontal"
                 className="mb-2"
               >
-                <Radio
+                <TradingRadio
                   value={
                     Schema.StopOrderTriggerDirection
                       .TRIGGER_DIRECTION_RISES_ABOVE
@@ -221,7 +221,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   id="triggerDirection-risesAbove"
                   label={'Rises above'}
                 />
-                <Radio
+                <TradingRadio
                   value={
                     Schema.StopOrderTriggerDirection
                       .TRIGGER_DIRECTION_FALLS_BELOW
@@ -229,7 +229,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   id="triggerDirection-fallsBelow"
                   label={'Falls below'}
                 />
-              </RadioGroup>
+              </TradingRadioGroup>
             );
           }}
         />
@@ -250,7 +250,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 const { value, ...props } = field;
                 return (
                   <div className="mb-2">
-                    <Input
+                    <TradingInput
                       data-testid="triggerPrice"
                       type="number"
                       step={priceStep}
@@ -264,9 +264,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               }}
             />
             {errors.triggerPrice && (
-              <InputError testId="stop-order-error-message-trigger-price">
+              <TradingInputError testId="stop-order-error-message-trigger-price">
                 {errors.triggerPrice.message}
-              </InputError>
+              </TradingInputError>
             )}
           </div>
         )}
@@ -299,7 +299,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 const { value, ...props } = field;
                 return (
                   <div className="mb-2">
-                    <Input
+                    <TradingInput
                       type="number"
                       step={trailingPercentOffsetStep}
                       appendElement="%"
@@ -313,9 +313,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               }}
             />
             {errors.triggerTrailingPercentOffset && (
-              <InputError testId="stop-order-error-message-trigger-trailing-percent-offset">
+              <TradingInputError testId="stop-order-error-message-trigger-trailing-percent-offset">
                 {errors.triggerTrailingPercentOffset.message}
-              </InputError>
+              </TradingInputError>
             )}
           </div>
         )}
@@ -326,25 +326,29 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           render={({ field }) => {
             const { onChange, value } = field;
             return (
-              <RadioGroup
+              <TradingRadioGroup
                 onChange={onChange}
                 value={value}
                 orientation="horizontal"
               >
-                <Radio value="price" id="triggerType-price" label={'Price'} />
-                <Radio
+                <TradingRadio
+                  value="price"
+                  id="triggerType-price"
+                  label={'Price'}
+                />
+                <TradingRadio
                   value="trailingPercentOffset"
                   id="triggerType-trailingPercentOffset"
                   label={'Trailing Percent Offset'}
                 />
-              </RadioGroup>
+              </TradingRadioGroup>
             );
           }}
         />
-      </FormGroup>
+      </TradingFormGroup>
       <div className="mb-2">
         <div className="flex items-start gap-4">
-          <FormGroup
+          <TradingFormGroup
             labelFor="input-price-quote"
             label={t(`Size`)}
             className="!mb-0 flex-1"
@@ -363,7 +367,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               render={({ field, fieldState }) => {
                 const { value, ...props } = field;
                 return (
-                  <Input
+                  <TradingInput
                     id="order-size"
                     className="w-full"
                     type="number"
@@ -378,11 +382,11 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 );
               }}
             />
-          </FormGroup>
+          </TradingFormGroup>
           <div className="pt-5 leading-10">@</div>
           <div className="flex-1">
             {type === Schema.OrderType.TYPE_LIMIT ? (
-              <FormGroup
+              <TradingFormGroup
                 labelFor="input-price-quote"
                 label={t(`Price (${quoteName})`)}
                 labelAlign="right"
@@ -403,7 +407,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   render={({ field, fieldState }) => {
                     const { value, ...props } = field;
                     return (
-                      <Input
+                      <TradingInput
                         id="input-price-quote"
                         className="w-full"
                         type="number"
@@ -417,7 +421,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                     );
                   }}
                 />
-              </FormGroup>
+              </TradingFormGroup>
             ) : (
               <div
                 className="text-sm text-right pt-5 leading-10"
@@ -431,21 +435,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           </div>
         </div>
         {errors.size && (
-          <InputError testId="stop-order-error-message-size">
+          <TradingInputError testId="stop-order-error-message-size">
             {errors.size.message}
-          </InputError>
+          </TradingInputError>
         )}
 
         {!errors.size &&
           errors.price &&
           type === Schema.OrderType.TYPE_LIMIT && (
-            <InputError testId="stop-order-error-message-price">
+            <TradingInputError testId="stop-order-error-message-price">
               {errors.price.message}
-            </InputError>
+            </TradingInputError>
           )}
       </div>
       <div className="mb-2">
-        <FormGroup
+        <TradingFormGroup
           label={t('Time in force')}
           labelFor="select-time-in-force"
           compact={true}
@@ -454,7 +458,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
             name="timeInForce"
             control={control}
             render={({ field, fieldState }) => (
-              <Select
+              <TradingSelect
                 id="select-time-in-force"
                 className="w-full"
                 data-testid="order-tif"
@@ -473,14 +477,14 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 >
                   {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
                 </option>
-              </Select>
+              </TradingSelect>
             )}
           />
-        </FormGroup>
+        </TradingFormGroup>
         {errors.timeInForce && (
-          <InputError testId="stop-error-message-tif">
+          <TradingInputError testId="stop-error-message-tif">
             {errors.timeInForce.message}
-          </InputError>
+          </TradingInputError>
         )}
       </div>
       <div className="flex gap-2 pb-2 justify-between">
@@ -490,7 +494,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           render={({ field }) => {
             const { onChange: onCheckedChange, value } = field;
             return (
-              <Checkbox
+              <TradingCheckbox
                 onCheckedChange={onCheckedChange}
                 checked={value}
                 name="expire"
@@ -499,7 +503,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
             );
           }}
         />
-        <Checkbox
+        <TradingCheckbox
           name="reduce-only"
           checked={true}
           disabled={true}
@@ -512,7 +516,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
       </div>
       {expire && (
         <>
-          <FormGroup
+          <TradingFormGroup
             label={t('Strategy')}
             labelFor="expiryStrategy"
             compact={true}
@@ -522,26 +526,26 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               control={control}
               render={({ field }) => {
                 return (
-                  <RadioGroup orientation="horizontal" {...field}>
-                    <Radio
+                  <TradingRadioGroup orientation="horizontal" {...field}>
+                    <TradingRadio
                       value={
                         Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
                       }
                       id="expiryStrategy-submit"
                       label={'Submit'}
                     />
-                    <Radio
+                    <TradingRadio
                       value={
                         Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
                       }
                       id="expiryStrategy-cancel"
                       label={'Cancel'}
                     />
-                  </RadioGroup>
+                  </TradingRadioGroup>
                 );
               }}
             />
-          </FormGroup>
+          </TradingFormGroup>
           <div className="mb-2">
             <Controller
               name="expiresAt"
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
index b6d2f6172..3e5106ff2 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
@@ -17,8 +17,8 @@ import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
 import {
-  Checkbox,
-  InputError,
+  TradingCheckbox,
+  TradingInputError,
   Intent,
   Notification,
   Tooltip,
@@ -417,7 +417,7 @@ export const DealTicket = ({
           name="postOnly"
           control={control}
           render={({ field }) => (
-            <Checkbox
+            <TradingCheckbox
               name="post-only"
               checked={!disablePostOnlyCheckbox && field.value}
               disabled={disablePostOnlyCheckbox}
@@ -449,7 +449,7 @@ export const DealTicket = ({
           name="reduceOnly"
           control={control}
           render={({ field }) => (
-            <Checkbox
+            <TradingCheckbox
               name="reduce-only"
               checked={!disableReduceOnlyCheckbox && field.value}
               disabled={disableReduceOnlyCheckbox}
@@ -483,7 +483,7 @@ export const DealTicket = ({
               name="iceberg"
               control={control}
               render={({ field }) => (
-                <Checkbox
+                <TradingCheckbox
                   name="iceberg"
                   checked={field.value}
                   onCheckedChange={field.onChange}
@@ -572,11 +572,11 @@ export const NoWalletWarning = ({
   if (isReadOnly) {
     return (
       <div className="mb-2">
-        <InputError testId="deal-ticket-error-message-summary">
+        <TradingInputError testId="deal-ticket-error-message-summary">
           {
             'You need to connect your own wallet to start trading on this market'
           }
-        </InputError>
+        </TradingInputError>
       </div>
     );
   }
@@ -613,9 +613,9 @@ const SummaryMessage = memo(
     if (error?.message) {
       return (
         <div className="mb-2">
-          <InputError testId="deal-ticket-error-message-summary">
+          <TradingInputError testId="deal-ticket-error-message-summary">
             {error?.message}
-          </InputError>
+          </TradingInputError>
         </div>
       );
     }
diff --git a/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
index 8f84c9da7..b174fcbda 100644
--- a/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
@@ -1,4 +1,8 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+} from '@vegaprotocol/ui-toolkit';
 import { formatForInput } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useRef } from 'react';
@@ -19,12 +23,12 @@ export const ExpirySelector = ({
   const dateFormatted = formatForInput(date);
   const minDate = formatForInput(date);
   return (
-    <FormGroup
+    <TradingFormGroup
       label={t('Expiry time/date')}
       labelFor="expiration"
       compact={true}
     >
-      <Input
+      <TradingInput
         data-testid="date-picker-field"
         id="expiration"
         type="datetime-local"
@@ -34,10 +38,10 @@ export const ExpirySelector = ({
         hasError={!!errorMessage}
       />
       {errorMessage && (
-        <InputError testId="deal-ticket-error-message-expiry">
+        <TradingInputError testId="deal-ticket-error-message-expiry">
           {errorMessage}
-        </InputError>
+        </TradingInputError>
       )}
-    </FormGroup>
+    </TradingFormGroup>
   );
 };
diff --git a/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
index 279e97e8a..7fefd689c 100644
--- a/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
@@ -1,7 +1,7 @@
 import {
-  FormGroup,
-  InputError,
-  Select,
+  TradingFormGroup,
+  TradingInputError,
+  TradingSelect,
   Tooltip,
   SimpleGrid,
 } from '@vegaprotocol/ui-toolkit';
@@ -90,12 +90,12 @@ export const TimeInForceSelector = ({
   };
 
   return (
-    <FormGroup
+    <TradingFormGroup
       label={t('Time in force')}
       labelFor="select-time-in-force"
       compact={true}
     >
-      <Select
+      <TradingSelect
         id="select-time-in-force"
         value={value}
         onChange={(e) => {
@@ -110,12 +110,12 @@ export const TimeInForceSelector = ({
             {timeInForceLabel(value)}
           </option>
         ))}
-      </Select>
+      </TradingSelect>
       {errorMessage && (
-        <InputError testId="deal-ticket-error-message-tif">
+        <TradingInputError testId="deal-ticket-error-message-tif">
           {renderError(errorMessage)}
-        </InputError>
+        </TradingInputError>
       )}
-    </FormGroup>
+    </TradingFormGroup>
   );
 };
diff --git a/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
index f6798d813..55ce9ef61 100644
--- a/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
@@ -1,5 +1,5 @@
 import {
-  InputError,
+  TradingInputError,
   SimpleGrid,
   Tooltip,
   TradingDropdown,
@@ -178,9 +178,9 @@ export const TypeSelector = ({
         value={value}
       />
       {errorMessage && (
-        <InputError testId="deal-ticket-error-message-type">
+        <TradingInputError testId="deal-ticket-error-message-type">
           {renderError(errorMessage as MarketModeValidationType)}
-        </InputError>
+        </TradingInputError>
       )}
     </>
   );
diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx
index 3468cce63..4dc0a8771 100644
--- a/libs/deposits/src/lib/deposit-form.tsx
+++ b/libs/deposits/src/lib/deposit-form.tsx
@@ -14,14 +14,14 @@ import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import {
   Button,
-  FormGroup,
-  Input,
-  InputError,
-  RichSelect,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+  TradingRichSelect,
   Notification,
   Intent,
   ButtonLink,
-  Select,
+  TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useWeb3React } from '@web3-react/core';
@@ -151,7 +151,7 @@ export const DepositForm = ({
       noValidate={true}
       data-testid="deposit-form"
     >
-      <FormGroup
+      <TradingFormGroup
         label={t('From (Ethereum address)')}
         labelFor="ethereum-address"
       >
@@ -197,15 +197,17 @@ export const DepositForm = ({
           }}
         />
         {errors.from?.message && (
-          <InputError intent="danger">{errors.from.message}</InputError>
+          <TradingInputError intent="danger">
+            {errors.from.message}
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label={t('To (Vega key)')} labelFor="to">
+      </TradingFormGroup>
+      <TradingFormGroup label={t('To (Vega key)')} labelFor="to">
         <AddressField
           pubKeys={pubKeys}
           onChange={() => setValue('to', '')}
           select={
-            <Select {...register('to')} id="to" defaultValue="">
+            <TradingSelect {...register('to')} id="to" defaultValue="">
               <option value="" disabled>
                 {t('Please select')}
               </option>
@@ -215,10 +217,10 @@ export const DepositForm = ({
                     {pk}
                   </option>
                 ))}
-            </Select>
+            </TradingSelect>
           }
           input={
-            <Input
+            <TradingInput
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={true} // focus input immediately after is shown
               id="to"
@@ -233,12 +235,12 @@ export const DepositForm = ({
           }
         />
         {errors.to?.message && (
-          <InputError intent="danger" forInput="to">
+          <TradingInputError intent="danger" forInput="to">
             {errors.to.message}
-          </InputError>
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label={t('Asset')} labelFor="asset">
+      </TradingFormGroup>
+      <TradingFormGroup label={t('Asset')} labelFor="asset">
         <Controller
           control={control}
           name="asset"
@@ -248,7 +250,7 @@ export const DepositForm = ({
             },
           }}
           render={({ field }) => (
-            <RichSelect
+            <TradingRichSelect
               data-testid="select-asset"
               id={field.name}
               name={field.name}
@@ -271,13 +273,13 @@ export const DepositForm = ({
                     }
                   />
                 ))}
-            </RichSelect>
+            </TradingRichSelect>
           )}
         />
         {errors.asset?.message && (
-          <InputError intent="danger" forInput="asset">
+          <TradingInputError intent="danger" forInput="asset">
             {errors.asset.message}
-          </InputError>
+          </TradingInputError>
         )}
         {isActive && isFaucetable && selectedAsset && (
           <UseButton onClick={submitFaucet}>
@@ -296,7 +298,7 @@ export const DepositForm = ({
             {t('View asset details')}
           </button>
         )}
-      </FormGroup>
+      </TradingFormGroup>
       <FaucetNotification
         isActive={isActive}
         selectedAsset={selectedAsset}
@@ -308,8 +310,8 @@ export const DepositForm = ({
         </div>
       )}
       {approved && (
-        <FormGroup label={t('Amount')} labelFor="amount">
-          <Input
+        <TradingFormGroup label={t('Amount')} labelFor="amount">
+          <TradingInput
             type="number"
             autoComplete="off"
             id="amount"
@@ -374,9 +376,9 @@ export const DepositForm = ({
             })}
           />
           {errors.amount?.message && (
-            <InputError intent="danger" forInput="amount">
+            <TradingInputError intent="danger" forInput="amount">
               {errors.amount.message}
-            </InputError>
+            </TradingInputError>
           )}
           {selectedAsset && balances && (
             <UseButton
@@ -390,7 +392,7 @@ export const DepositForm = ({
               {t('Use maximum')}
             </UseButton>
           )}
-        </FormGroup>
+        </TradingFormGroup>
       )}
       <ApproveNotification
         isActive={isActive}
diff --git a/libs/environment/src/components/node-switcher/node-switcher.tsx b/libs/environment/src/components/node-switcher/node-switcher.tsx
index 9dee3bbd4..b578c5ecd 100644
--- a/libs/environment/src/components/node-switcher/node-switcher.tsx
+++ b/libs/environment/src/components/node-switcher/node-switcher.tsx
@@ -4,10 +4,10 @@ import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   ButtonLink,
-  Input,
+  TradingInput,
   Loader,
-  Radio,
-  RadioGroup,
+  TradingRadio,
+  TradingRadioGroup,
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '../../hooks';
 import { CUSTOM_NODE_KEY } from '../../types';
@@ -76,7 +76,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
               `This app will only work on ${VEGA_ENV}. Select a node to connect to.`
             )}
           </p>
-          <RadioGroup
+          <TradingRadioGroup
             value={nodeRadio}
             onChange={(value) => setNodeRadio(value)}
           >
@@ -112,7 +112,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
                 />
               </div>
             </div>
-          </RadioGroup>
+          </TradingRadioGroup>
           <div className="mt-4">
             <Button
               fill={true}
@@ -161,7 +161,7 @@ const CustomRowWrapper = ({
     <LayoutRow dataTestId="custom-row">
       <div className="flex w-full mb-2">
         {nodes.length > 0 && (
-          <Radio
+          <TradingRadio
             id="node-url-custom"
             value={CUSTOM_NODE_KEY}
             label={nodeRadio === CUSTOM_NODE_KEY ? '' : t('Other')}
@@ -172,7 +172,7 @@ const CustomRowWrapper = ({
             data-testid="custom-node"
             className="flex items-center w-full gap-2"
           >
-            <Input
+            <TradingInput
               placeholder="https://"
               value={inputText}
               hasError={Boolean(error)}
diff --git a/libs/environment/src/components/node-switcher/row-data.tsx b/libs/environment/src/components/node-switcher/row-data.tsx
index 77db447a6..949f20797 100644
--- a/libs/environment/src/components/node-switcher/row-data.tsx
+++ b/libs/environment/src/components/node-switcher/row-data.tsx
@@ -2,7 +2,7 @@ import type { ApolloError } from '@apollo/client';
 import { useHeaderStore } from '@vegaprotocol/apollo-client';
 import { isValidUrl } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Radio } from '@vegaprotocol/ui-toolkit';
+import { TradingRadio } from '@vegaprotocol/ui-toolkit';
 import { useEffect, useState } from 'react';
 import { CUSTOM_NODE_KEY } from '../../types';
 import {
@@ -138,7 +138,7 @@ export const RowData = ({
     <>
       {id !== CUSTOM_NODE_KEY && (
         <div className="break-all" data-testid="node">
-          <Radio id={`node-url-${id}`} value={url} label={url} />
+          <TradingRadio id={`node-url-${id}`} value={url} label={url} />
         </div>
       )}
       <LayoutCell
diff --git a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
index 87093e790..4710035b7 100644
--- a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
+++ b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
@@ -9,9 +9,9 @@ import { t } from '@vegaprotocol/i18n';
 import { Size } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
 import {
-  FormGroup,
-  Input,
-  InputError,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
   Button,
   Dialog,
   Icon,
@@ -102,8 +102,12 @@ export const OrderEditDialog = ({
         noValidate
       >
         <div className="flex flex-col md:flex-row gap-4">
-          <FormGroup label={t('Price')} labelFor="limitPrice" className="grow">
-            <Input
+          <TradingFormGroup
+            label={t('Price')}
+            labelFor="limitPrice"
+            className="grow"
+          >
+            <TradingInput
               type="number"
               step={step}
               {...register('limitPrice', {
@@ -119,13 +123,13 @@ export const OrderEditDialog = ({
               id="limitPrice"
             />
             {errors.limitPrice?.message && (
-              <InputError intent="danger">
+              <TradingInputError intent="danger">
                 {errors.limitPrice.message}
-              </InputError>
+              </TradingInputError>
             )}
-          </FormGroup>
-          <FormGroup label={t('Size')} labelFor="size" className="grow">
-            <Input
+          </TradingFormGroup>
+          <TradingFormGroup label={t('Size')} labelFor="size" className="grow">
+            <TradingInput
               type="number"
               step={stepSize}
               {...register('size', {
@@ -139,9 +143,11 @@ export const OrderEditDialog = ({
               id="size"
             />
             {errors.size?.message && (
-              <InputError intent="danger">{errors.size.message}</InputError>
+              <TradingInputError intent="danger">
+                {errors.size.message}
+              </TradingInputError>
             )}
-          </FormGroup>
+          </TradingFormGroup>
         </div>
         <Button variant="primary" size="md" type="submit">
           {t('Update')}
diff --git a/libs/ui-toolkit/src/components/index.ts b/libs/ui-toolkit/src/components/index.ts
index 409ce59fc..2b76f30bd 100644
--- a/libs/ui-toolkit/src/components/index.ts
+++ b/libs/ui-toolkit/src/components/index.ts
@@ -6,18 +6,18 @@ export * from './background-video';
 export * from './breadcrumbs';
 export * from './button';
 export * from './callout';
-export * from './trading-checkbox';
+export * from './checkbox';
 export * from './copy-with-tooltip';
 export * from './dialog';
 export * from './divider';
 export * from './drawer';
 export * from './dropdown-menu';
-export * from './trading-form-group';
+export * from './form-group';
 export * from './healthbar';
 export * from './icon';
 export * from './indicator';
-export * from './trading-input-error';
-export * from './trading-input';
+export * from './input';
+export * from './input-error';
 export * from './key-value-table';
 export * from './link';
 export * from './loader';
@@ -48,10 +48,18 @@ export * from './tiny-scroll';
 export * from './toast';
 export * from './toggle';
 export * from './tooltip';
-export * from './trading-button';
-export * from './trading-dropdown';
 export * from './traffic-light';
 export * from './vega-icons';
 export * from './vega-logo';
 export * from './viewing-as-user';
 export * from './pill';
+
+// Trading specific components
+export * from './trading-button';
+export * from './trading-checkbox';
+export * from './trading-dropdown';
+export * from './trading-form-group';
+export * from './trading-input-error';
+export * from './trading-input';
+export * from './trading-radio-group';
+export * from './trading-select';
diff --git a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx
index e77749bcc..a0db29d4d 100644
--- a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx
+++ b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx
@@ -1,24 +1,24 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { Checkbox } from './checkbox';
+import { TradingCheckbox } from './checkbox';
 
 describe('Checkbox', () => {
   it('should render checkbox with label successfully', () => {
-    render(<Checkbox label="test" />);
+    render(<TradingCheckbox label="test" />);
     expect(screen.getByText('test')).toBeInTheDocument();
   });
 
   it('should render a checked checkbox if specified in state', () => {
-    render(<Checkbox label="label" checked={true} />);
+    render(<TradingCheckbox label="label" checked={true} />);
     expect(screen.getByRole('img')).toBeInTheDocument();
   });
 
   it('should render an unchecked checkbox if specified in state', () => {
-    render(<Checkbox label="unchecked" checked={false} />);
+    render(<TradingCheckbox label="unchecked" checked={false} />);
     expect(screen.queryByRole('img')).not.toBeInTheDocument();
   });
 
   it('should render an indeterminate checkbox if specified in state', () => {
-    render(<Checkbox label="indeterminate" checked="indeterminate" />);
+    render(<TradingCheckbox label="indeterminate" checked="indeterminate" />);
     expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument();
   });
 
@@ -26,7 +26,11 @@ describe('Checkbox', () => {
     const callback = jest.fn();
 
     render(
-      <Checkbox name="test" label="onchange" onCheckedChange={callback} />
+      <TradingCheckbox
+        name="test"
+        label="onchange"
+        onCheckedChange={callback}
+      />
     );
 
     const checkbox = screen.getByText('onchange');
diff --git a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx
index c675192a7..d5ae59e0d 100644
--- a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx
+++ b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx
@@ -1,13 +1,15 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import type { CheckboxProps } from './checkbox';
-import { Checkbox } from './checkbox';
+import type { TradingCheckboxProps } from './checkbox';
+import { TradingCheckbox } from './checkbox';
 
 export default {
-  component: Checkbox,
+  component: TradingCheckbox,
   title: 'Checkbox',
-} as Meta<typeof Checkbox>;
+} as Meta<typeof TradingCheckbox>;
 
-const Template: StoryFn<CheckboxProps> = (args) => <Checkbox {...args} />;
+const Template: StoryFn<TradingCheckboxProps> = (args) => (
+  <TradingCheckbox {...args} />
+);
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.tsx b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.tsx
index 3ca7036a9..d2589625d 100644
--- a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.tsx
+++ b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 type CheckedState = boolean | 'indeterminate';
-export interface CheckboxProps {
+export interface TradingCheckboxProps {
   checked?: CheckedState;
   label?: ReactNode;
   name?: string;
@@ -12,13 +12,13 @@ export interface CheckboxProps {
   disabled?: boolean;
 }
 
-export const Checkbox = ({
+export const TradingCheckbox = ({
   checked,
   label,
   name,
   onCheckedChange,
   disabled = false,
-}: CheckboxProps) => {
+}: TradingCheckboxProps) => {
   const rootClasses = classNames(
     'relative flex justify-center items-center w-3 h-3',
     'border rounded-sm overflow-hidden',
diff --git a/libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx b/libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx
index 405c0ae1a..07ccce16d 100644
--- a/libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx
+++ b/libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx
@@ -1,22 +1,22 @@
 import { render, screen } from '@testing-library/react';
 
-import { FormGroup } from './form-group';
+import { TradingFormGroup } from './form-group';
 
 describe('FormGroup', () => {
   it('should render label if given a label', () => {
     render(
-      <FormGroup label="label" labelFor="test">
+      <TradingFormGroup label="label" labelFor="test">
         <input id="test"></input>
-      </FormGroup>
+      </TradingFormGroup>
     );
     expect(screen.getByLabelText('label')).toBeInTheDocument();
   });
 
   it('should render children', () => {
     render(
-      <FormGroup label="label" labelFor="test">
+      <TradingFormGroup label="label" labelFor="test">
         <input data-testid="foo" id="test"></input>
-      </FormGroup>
+      </TradingFormGroup>
     );
     expect(screen.getByTestId('foo')).toBeInTheDocument();
   });
diff --git a/libs/ui-toolkit/src/components/trading-form-group/form-group.tsx b/libs/ui-toolkit/src/components/trading-form-group/form-group.tsx
index 3fb9028c3..bb3cf26c9 100644
--- a/libs/ui-toolkit/src/components/trading-form-group/form-group.tsx
+++ b/libs/ui-toolkit/src/components/trading-form-group/form-group.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
-export interface FormGroupProps {
+export interface TradingFormGroupProps {
   children: ReactNode;
   className?: string;
   label: string | ReactNode; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then use the hideLabel prop"
@@ -13,7 +13,7 @@ export interface FormGroupProps {
   compact?: boolean;
 }
 
-export const FormGroup = ({
+export const TradingFormGroup = ({
   children,
   className,
   label,
@@ -23,7 +23,7 @@ export const FormGroup = ({
   hideLabel = false,
   compact = false,
   disabled = false,
-}: FormGroupProps) => {
+}: TradingFormGroupProps) => {
   const wrapperClasses = classNames(
     'relative',
     {
diff --git a/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx b/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx
index 0a1a5516a..0d98733f5 100644
--- a/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx
+++ b/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx
@@ -1,9 +1,9 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { Input } from '../trading-input';
-import type { FormGroupProps } from './form-group';
-import { FormGroup } from './form-group';
+import { TradingInput } from '../trading-input';
+import type { TradingFormGroupProps } from './form-group';
+import { TradingFormGroup } from './form-group';
 export default {
-  component: FormGroup,
+  component: TradingFormGroup,
   title: 'FormGroup',
   argTypes: {
     label: {
@@ -27,10 +27,10 @@ export default {
   },
 } as Meta;
 
-const Template: StoryFn<FormGroupProps> = (args) => (
-  <FormGroup {...args}>
-    <Input id="labelFor" />
-  </FormGroup>
+const Template: StoryFn<TradingFormGroupProps> = (args) => (
+  <TradingFormGroup {...args}>
+    <TradingInput id="labelFor" />
+  </TradingFormGroup>
 );
 
 export const Default = Template.bind({});
diff --git a/libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx b/libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx
index 352d66675..30b82d326 100644
--- a/libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx
+++ b/libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx
@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
 
-import { InputError } from './input-error';
+import { TradingInputError } from './input-error';
 
 describe('InputError', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<InputError />);
+    const { baseElement } = render(<TradingInputError />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx b/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx
index 1eeb71539..f92b7f42f 100644
--- a/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx
+++ b/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx
@@ -1,12 +1,12 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { InputError } from './input-error';
+import { TradingInputError } from './input-error';
 
 export default {
-  component: InputError,
+  component: TradingInputError,
   title: 'InputError',
 } as Meta;
 
-const Template: StoryFn = (args) => <InputError {...args} />;
+const Template: StoryFn = (args) => <TradingInputError {...args} />;
 
 export const Danger = Template.bind({});
 Danger.args = {
diff --git a/libs/ui-toolkit/src/components/trading-input-error/input-error.tsx b/libs/ui-toolkit/src/components/trading-input-error/input-error.tsx
index 473e5ae4f..7d2ec2a78 100644
--- a/libs/ui-toolkit/src/components/trading-input-error/input-error.tsx
+++ b/libs/ui-toolkit/src/components/trading-input-error/input-error.tsx
@@ -1,21 +1,21 @@
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 
-interface InputErrorProps extends HTMLAttributes<HTMLDivElement> {
+interface TradingInputErrorProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   intent?: 'danger' | 'warning';
   forInput?: string;
   testId?: string;
 }
 
-export const InputError = ({
+export const TradingInputError = ({
   intent = 'danger',
   children,
   forInput,
   testId,
   className,
   ...props
-}: InputErrorProps) => {
+}: TradingInputErrorProps) => {
   const effectiveClassName = classNames(
     'text-xs flex items-center first-letter:uppercase',
     'mt-2',
diff --git a/libs/ui-toolkit/src/components/trading-input/input.spec.tsx b/libs/ui-toolkit/src/components/trading-input/input.spec.tsx
index 9a37552b5..deecf35b4 100644
--- a/libs/ui-toolkit/src/components/trading-input/input.spec.tsx
+++ b/libs/ui-toolkit/src/components/trading-input/input.spec.tsx
@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
 
-import { Input } from './input';
+import { TradingInput } from './input';
 
 describe('Input', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Input />);
+    const { baseElement } = render(<TradingInput />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/libs/ui-toolkit/src/components/trading-input/input.stories.tsx b/libs/ui-toolkit/src/components/trading-input/input.stories.tsx
index aaa98b2c4..dafca8103 100644
--- a/libs/ui-toolkit/src/components/trading-input/input.stories.tsx
+++ b/libs/ui-toolkit/src/components/trading-input/input.stories.tsx
@@ -1,14 +1,14 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { Input } from './input';
+import { TradingInput } from './input';
 import { FormGroup } from '../form-group';
 export default {
-  component: Input,
+  component: TradingInput,
   title: 'Input',
 } as Meta;
 
 const Template: StoryFn = (args) => (
   <FormGroup label="Hello" labelFor={args.id}>
-    <Input value="I type words" {...args} />
+    <TradingInput value="I type words" {...args} />
   </FormGroup>
 );
 
diff --git a/libs/ui-toolkit/src/components/trading-input/input.tsx b/libs/ui-toolkit/src/components/trading-input/input.tsx
index 0474d9422..7bef3d2cc 100644
--- a/libs/ui-toolkit/src/components/trading-input/input.tsx
+++ b/libs/ui-toolkit/src/components/trading-input/input.tsx
@@ -55,9 +55,9 @@ type InputAppend = NoPrepend &
 
 type AffixProps = InputPrepend | InputAppend;
 
-export type InputProps = InputRootProps & AffixProps;
+export type TradingInputProps = InputRootProps & AffixProps;
 
-export const inputStyle = ({
+export const tradingInputStyle = ({
   style,
   disabled,
 }: {
@@ -79,7 +79,7 @@ const getAffixElement = ({
   appendElement,
   appendIconName,
   appendIconDescription,
-}: Pick<InputProps, keyof AffixProps>) => {
+}: Pick<TradingInputProps, keyof AffixProps>) => {
   const position = prependIconName || prependElement ? 'pre' : 'post';
 
   const className = classNames(
@@ -112,7 +112,7 @@ const getAffixElement = ({
   return null;
 };
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
+export const TradingInput = forwardRef<HTMLInputElement, TradingInputProps>(
   (
     {
       prependIconName,
diff --git a/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx b/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx
index a261dc2d3..f7bd74a5b 100644
--- a/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx
+++ b/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx
@@ -1,18 +1,18 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import type { RadioGroupProps } from './radio-group';
-import { RadioGroup, Radio } from './radio-group';
+import type { TradingRadioGroupProps } from './radio-group';
+import { TradingRadioGroup, TradingRadio } from './radio-group';
 
 export default {
-  component: RadioGroup,
+  component: TradingRadioGroup,
   title: 'RadioGroup',
 } as Meta;
 
-const Template: StoryFn<RadioGroupProps> = (args) => (
-  <RadioGroup {...args}>
-    <Radio id="item-1" value="1" label="Item 1" />
-    <Radio id="item-2" value="2" label="Item 2" />
-    <Radio id="item-3" value="3" label="Disabled item" disabled={true} />
-  </RadioGroup>
+const Template: StoryFn<TradingRadioGroupProps> = (args) => (
+  <TradingRadioGroup {...args}>
+    <TradingRadio id="item-1" value="1" label="Item 1" />
+    <TradingRadio id="item-2" value="2" label="Item 2" />
+    <TradingRadio id="item-3" value="3" label="Disabled item" disabled={true} />
+  </TradingRadioGroup>
 );
 
 export const Vertical = Template.bind({});
diff --git a/libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx b/libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx
index 0602140d2..c9710979d 100644
--- a/libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx
+++ b/libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx
@@ -3,7 +3,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
-export interface RadioGroupProps {
+export interface TradingRadioGroupProps {
   name?: string;
   children: ReactNode;
   defaultValue?: string;
@@ -13,7 +13,10 @@ export interface RadioGroupProps {
   className?: string;
 }
 
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+export const TradingRadioGroup = forwardRef<
+  HTMLDivElement,
+  TradingRadioGroupProps
+>(
   (
     {
       children,
@@ -22,7 +25,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       orientation = 'vertical',
       onChange,
       className,
-    }: RadioGroupProps,
+    }: TradingRadioGroupProps,
     ref
   ) => {
     const groupClasses = classNames(
@@ -55,7 +58,7 @@ interface RadioProps {
   disabled?: boolean;
 }
 
-export const Radio = ({ id, value, label, disabled }: RadioProps) => {
+export const TradingRadio = ({ id, value, label, disabled }: RadioProps) => {
   const wrapperClasses = classNames('flex items-center gap-1.5 text-xs');
   const itemClasses = classNames(
     'flex justify-center items-center',
diff --git a/libs/ui-toolkit/src/components/trading-select/select.spec.tsx b/libs/ui-toolkit/src/components/trading-select/select.spec.tsx
index e01a95072..8b20dfb80 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.spec.tsx
+++ b/libs/ui-toolkit/src/components/trading-select/select.spec.tsx
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
-import { RichSelect, Select, Option } from './select';
+import { TradingRichSelect, TradingSelect, TradingOption } from './select';
 
 describe('Select', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Select />);
+    const { baseElement } = render(<TradingSelect />);
     expect(baseElement).toBeTruthy();
   });
 });
@@ -11,10 +11,10 @@ describe('Select', () => {
 describe('RichSelect', () => {
   it('should render select element with placeholder when no value is pre-selected', async () => {
     const { findByTestId } = render(
-      <RichSelect placeholder={'Select'}>
-        <Option value={'1'}>1</Option>
-        <Option value={'2'}>2</Option>
-      </RichSelect>
+      <TradingRichSelect placeholder={'Select'}>
+        <TradingOption value={'1'}>1</TradingOption>
+        <TradingOption value={'2'}>2</TradingOption>
+      </TradingRichSelect>
     );
     const btn = (await findByTestId(
       'rich-select-trigger'
@@ -24,10 +24,10 @@ describe('RichSelect', () => {
 
   it('should render select element with pre-selected value', async () => {
     const { findByTestId } = render(
-      <RichSelect placeholder={'Select'} value={'1'}>
-        <Option value={'1'}>1</Option>
-        <Option value={'2'}>2</Option>
-      </RichSelect>
+      <TradingRichSelect placeholder={'Select'} value={'1'}>
+        <TradingOption value={'1'}>1</TradingOption>
+        <TradingOption value={'2'}>2</TradingOption>
+      </TradingRichSelect>
     );
     const btn = (await findByTestId(
       'rich-select-trigger'
diff --git a/libs/ui-toolkit/src/components/trading-select/select.stories.tsx b/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
index 612fbf441..1daa565f8 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
+++ b/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
@@ -1,25 +1,25 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { Option, Select, RichSelect } from './select';
+import { TradingOption, TradingSelect, TradingRichSelect } from './select';
 import { FormGroup } from '../form-group';
 
 export default {
-  component: Select,
+  component: TradingSelect,
   title: 'Select',
 } as Meta;
 
 const Template: StoryFn = (args) => (
   <FormGroup label="Select an option" labelFor={args.id}>
-    <Select {...args}>
+    <TradingSelect {...args}>
       <option value="Option 1">Option 1</option>
       <option value="Option 2">Option 2</option>
       <option value="Option 3">Option 3</option>
-    </Select>
+    </TradingSelect>
   </FormGroup>
 );
 
 const RichSelectTemplate: StoryFn = ({ placeholder, ...props }) => (
   <FormGroup label="Select an option" labelFor={props.id}>
-    <RichSelect placeholder={placeholder} {...props} />
+    <TradingRichSelect placeholder={placeholder} {...props} />
   </FormGroup>
 );
 
@@ -51,42 +51,42 @@ RichDefaultSelect.args = {
   },
   children: (
     <>
-      <Option value="1">
+      <TradingOption value="1">
         <div className="flex flex-col justify-start items-start">
           <span>Option One</span>
           <span className="text-xs">First option</span>
         </div>
-      </Option>
-      <Option value="2">
+      </TradingOption>
+      <TradingOption value="2">
         <div className="flex flex-col justify-start items-start">
           <span>Option Two</span>
           <span className="text-xs">Second option</span>
         </div>
-      </Option>
-      <Option value="3">
+      </TradingOption>
+      <TradingOption value="3">
         <div className="flex flex-col justify-start items-start">
           <span>Option Three</span>
           <span className="text-xs">Third option</span>
         </div>
-      </Option>
-      <Option value="4">
+      </TradingOption>
+      <TradingOption value="4">
         <div className="flex flex-col justify-start items-start">
           <span>Option Four</span>
           <span className="text-xs">Fourth option</span>
         </div>
-      </Option>
-      <Option value="5">
+      </TradingOption>
+      <TradingOption value="5">
         <div className="flex flex-col justify-start items-start">
           <span>Option Five</span>
           <span className="text-xs">Fifth option</span>
         </div>
-      </Option>
-      <Option value="6">
+      </TradingOption>
+      <TradingOption value="6">
         <div className="flex flex-col justify-start items-start">
           <span>Option Six</span>
           <span className="text-xs">Sixth option</span>
         </div>
-      </Option>
+      </TradingOption>
     </>
   ),
 };
diff --git a/libs/ui-toolkit/src/components/trading-select/select.tsx b/libs/ui-toolkit/src/components/trading-select/select.tsx
index b6fe2c9ba..a8869a661 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.tsx
+++ b/libs/ui-toolkit/src/components/trading-select/select.tsx
@@ -6,14 +6,15 @@ import { Icon } from '..';
 import { defaultSelectElement } from '../../utils/shared';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+export interface TradingSelectProps
+  extends SelectHTMLAttributes<HTMLSelectElement> {
   hasError?: boolean;
   className?: string;
   value?: string | number;
   children?: React.ReactNode;
 }
 
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
   ({ className, hasError, ...props }, ref) => (
     <div className="flex items-center relative">
       <select
@@ -33,7 +34,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   )
 );
 
-export type RichSelectProps = React.ComponentProps<
+export type TradingRichSelectProps = React.ComponentProps<
   typeof SelectPrimitive.Root
 > & {
   placeholder: string;
@@ -41,9 +42,9 @@ export type RichSelectProps = React.ComponentProps<
   id?: string;
   'data-testid'?: string;
 };
-export const RichSelect = forwardRef<
+export const TradingRichSelect = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  RichSelectProps
+  TradingRichSelectProps
 >(({ id, children, placeholder, hasError, ...props }, forwardedRef) => {
   const containerRef = useRef<HTMLDivElement>();
   const contentRef = useRef<HTMLDivElement>();
@@ -98,7 +99,7 @@ export const RichSelect = forwardRef<
   );
 });
 
-export const Option = forwardRef<
+export const TradingOption = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentProps<typeof SelectPrimitive.Item>
 >(({ children, className, ...props }, forwardedRef) => (
diff --git a/libs/ui-toolkit/src/components/trading-text-area/index.ts b/libs/ui-toolkit/src/components/trading-text-area/index.ts
deleted file mode 100644
index e18b3258a..000000000
--- a/libs/ui-toolkit/src/components/trading-text-area/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './text-area';
diff --git a/libs/ui-toolkit/src/components/trading-text-area/text-area.spec.tsx b/libs/ui-toolkit/src/components/trading-text-area/text-area.spec.tsx
deleted file mode 100644
index 58e2dea62..000000000
--- a/libs/ui-toolkit/src/components/trading-text-area/text-area.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { TextArea } from './text-area';
-
-describe('TextArea', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<TextArea />);
-    expect(baseElement).toBeTruthy();
-  });
-});
diff --git a/libs/ui-toolkit/src/components/trading-text-area/text-area.stories.tsx b/libs/ui-toolkit/src/components/trading-text-area/text-area.stories.tsx
deleted file mode 100644
index cf28e3c01..000000000
--- a/libs/ui-toolkit/src/components/trading-text-area/text-area.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Story, Meta } from '@storybook/react';
-import { FormGroup } from '../form-group';
-import { TextArea } from './text-area';
-
-export default {
-  component: TextArea,
-  title: 'TextArea',
-} as Meta;
-
-const Template: Story = (args, context) => (
-  <FormGroup labelClassName="sr-only" label="Hello" labelFor={args.id}>
-    <TextArea {...args} className="h-48" defaultValue="I type words" />
-  </FormGroup>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  id: 'text-area-default',
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  id: 'text-area-error',
-  hasError: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  id: 'text-area-disabled',
-  disabled: true,
-};
diff --git a/libs/ui-toolkit/src/components/trading-text-area/text-area.tsx b/libs/ui-toolkit/src/components/trading-text-area/text-area.tsx
deleted file mode 100644
index 87350fc90..000000000
--- a/libs/ui-toolkit/src/components/trading-text-area/text-area.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import classNames from 'classnames';
-import type { TextareaHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import { defaultFormElement } from '../../utils/shared';
-
-export interface TextAreaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  hasError?: boolean;
-  className?: string;
-}
-
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ className, hasError, ...props }, ref) => {
-    const textAreaClassName = classNames(
-      'shadow-input dark:shadow-input-dark',
-      className
-    );
-
-    const classes = classNames(
-      defaultFormElement(hasError, props.disabled),
-      textAreaClassName
-    );
-    return <textarea {...props} ref={ref} className={classes} />;
-  }
-);
diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx
index 95006ac49..8714e5729 100644
--- a/libs/wallet/src/connect-dialog/connect-dialog.tsx
+++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames';
 import { create } from 'zustand';
 import {
   Dialog,
-  FormGroup,
-  Input,
   Intent,
   Pill,
   TradingButton,
+  TradingFormGroup,
+  TradingInput,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -421,17 +421,17 @@ const CustomUrlInput = ({
           <VegaIcon name={VegaIconNames.ARROW_LEFT} /> {t('Go back')}
         </button>
       </div>
-      <FormGroup
+      <TradingFormGroup
         labelFor="wallet-url"
         label={t('Custom wallet location')}
         hideLabel
       >
-        <Input
+        <TradingInput
           value={walletUrl}
           onChange={(e) => setWalletUrl(e.target.value)}
           name="wallet-url"
         />
-      </FormGroup>
+      </TradingFormGroup>
       <ConnectionOption
         disabled={!isDesktopWalletRunning}
         type="jsonRpc"
diff --git a/libs/wallet/src/connect-dialog/view-connector-form.tsx b/libs/wallet/src/connect-dialog/view-connector-form.tsx
index 661894906..736e0ead7 100644
--- a/libs/wallet/src/connect-dialog/view-connector-form.tsx
+++ b/libs/wallet/src/connect-dialog/view-connector-form.tsx
@@ -1,8 +1,8 @@
 import { t } from '@vegaprotocol/i18n';
 import {
-  FormGroup,
-  Input,
-  InputError,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
   Intent,
   TradingButton,
   VegaIcon,
@@ -60,8 +60,8 @@ export function ViewConnectorForm({
             'Browse from the perspective of another Vega user in read-only mode.'
           )}
         </p>
-        <FormGroup label={t('Vega Pubkey')} labelFor="address">
-          <Input
+        <TradingFormGroup label={t('Vega Pubkey')} labelFor="address">
+          <TradingInput
             {...register('address', {
               required: t('Required'),
               validate: validatePubkey,
@@ -71,9 +71,11 @@ export function ViewConnectorForm({
             type="text"
           />
           {errors.address?.message && (
-            <InputError intent="danger">{errors.address.message}</InputError>
+            <TradingInputError intent="danger">
+              {errors.address.message}
+            </TradingInputError>
           )}
-        </FormGroup>
+        </TradingFormGroup>
         <TradingButton
           data-testid="connect"
           intent={Intent.Info}
diff --git a/libs/withdraws/src/lib/withdraw-form.tsx b/libs/withdraws/src/lib/withdraw-form.tsx
index 08157a84b..8d5623cc2 100644
--- a/libs/withdraws/src/lib/withdraw-form.tsx
+++ b/libs/withdraws/src/lib/withdraw-form.tsx
@@ -12,11 +12,11 @@ import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import {
   Button,
-  FormGroup,
-  Input,
-  InputError,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
   Notification,
-  RichSelect,
+  TradingRichSelect,
   ExternalLink,
   Intent,
 } from '@vegaprotocol/ui-toolkit';
@@ -150,7 +150,7 @@ export const WithdrawForm = ({
     field: ControllerRenderProps<FormFields, 'asset'>;
   }) => {
     return (
-      <RichSelect
+      <TradingRichSelect
         data-testid="select-asset"
         id="asset"
         name="asset"
@@ -170,7 +170,7 @@ export const WithdrawForm = ({
             balance={<AssetBalance asset={a} />}
           />
         ))}
-      </RichSelect>
+      </TradingRichSelect>
     );
   };
 
@@ -193,7 +193,7 @@ export const WithdrawForm = ({
         noValidate={true}
         data-testid="withdraw-form"
       >
-        <FormGroup label={t('Asset')} labelFor="asset">
+        <TradingFormGroup label={t('Asset')} labelFor="asset">
           <Controller
             control={control}
             name="asset"
@@ -205,10 +205,12 @@ export const WithdrawForm = ({
             render={renderAssetsSelector}
           />
           {errors.asset?.message && (
-            <InputError intent="danger">{errors.asset.message}</InputError>
+            <TradingInputError intent="danger">
+              {errors.asset.message}
+            </TradingInputError>
           )}
-        </FormGroup>
-        <FormGroup
+        </TradingFormGroup>
+        <TradingFormGroup
           label={t('To (Ethereum address)')}
           labelFor="ethereum-address"
         >
@@ -218,15 +220,17 @@ export const WithdrawForm = ({
               clearErrors('to');
             }}
           />
-          <Input
+          <TradingInput
             id="ethereum-address"
             data-testid="eth-address-input"
             {...register('to', { validate: { required, ethereumAddress } })}
           />
           {errors.to?.message && (
-            <InputError intent="danger">{errors.to.message}</InputError>
+            <TradingInputError intent="danger">
+              {errors.to.message}
+            </TradingInputError>
           )}
-        </FormGroup>
+        </TradingFormGroup>
         {selectedAsset && threshold && (
           <div className="mb-4">
             <WithdrawLimits
@@ -238,8 +242,8 @@ export const WithdrawForm = ({
             />
           </div>
         )}
-        <FormGroup label={t('Amount')} labelFor="amount">
-          <Input
+        <TradingFormGroup label={t('Amount')} labelFor="amount">
+          <TradingInput
             data-testid="amount-input"
             type="number"
             autoComplete="off"
@@ -259,7 +263,9 @@ export const WithdrawForm = ({
             })}
           />
           {errors.amount?.message && (
-            <InputError intent="danger">{errors.amount.message}</InputError>
+            <TradingInputError intent="danger">
+              {errors.amount.message}
+            </TradingInputError>
           )}
           {selectedAsset && (
             <UseButton
@@ -282,7 +288,7 @@ export const WithdrawForm = ({
               />
             </div>
           )}
-        </FormGroup>
+        </TradingFormGroup>
         <Button
           data-testid="submit-withdrawal"
           type="submit"