diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index af477a7d886..8c8b468d246 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -70,3 +70,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 6a70e29d4b3..75fe49a83e3 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -71,3 +71,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
diff --git a/apps/sim/app/(auth)/components/auth-input.tsx b/apps/sim/app/(auth)/components/auth-input.tsx
index 396bae64cf8..a2c3bc12979 100644
--- a/apps/sim/app/(auth)/components/auth-input.tsx
+++ b/apps/sim/app/(auth)/components/auth-input.tsx
@@ -1,20 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 
-/**
- * The auth text field — a {@link ChipInput} raised to the auth control height
- * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
- * surfaces shares one slightly-taller geometry. All chip props pass through
- * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
- * caller's `className` (layout only) still composes on top.
- */
-export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
-  ({ className, ...props }, ref) => (
-    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
-  )
+/** Auth fields use the larger shared chip size while retaining native input props and refs. */
+export const AuthInput = React.forwardRef<HTMLInputElement, Omit<ChipInputProps, 'size'>>(
+  (props, ref) => <ChipInput {...props} ref={ref} size='lg' />
 )
 
 AuthInput.displayName = 'AuthInput'
diff --git a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
index 4fbba3d3750..5787f2c8560 100644
--- a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
+++ b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
@@ -9,7 +9,7 @@ type LandingCtaSize = 'compact' | 'default' | 'display'
 
 export type LandingCtaSection = PostHogEventMap['landing_cta_clicked']['section']
 
-interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant'> {
+interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant' | 'size'> {
   size?: LandingCtaSize
   variant?: 'primary' | 'outline'
   /** Adds the animated chevron used by demo actions. */
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
index a843694bfe8..fa0e488c761 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
@@ -11,7 +11,7 @@ const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
   ComponentProps<'input'>,
-  'type' | 'value' | 'onChange' | 'readOnly' | 'style'
+  'type' | 'value' | 'onChange' | 'readOnly' | 'style' | 'size'
 > & {
   /** The chip owns field styling; callers use className for layout. */
   style?: never
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 3dd23d13604..b9dfb3271a2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -7,7 +7,7 @@ import {
   ChipConfirmModal,
   ChipEmailsInput,
   ChipInput,
-  ChipTextarea,
+  ChipModalField,
   cn,
   Input,
   Label,
@@ -335,12 +335,7 @@ export function ChatDeploy({
 
   return (
     <>
-      <form
-        id='chat-deploy-form'
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className='-mx-1 space-y-4 px-1'
-      >
+      <form id='chat-deploy-form' ref={formRef} onSubmit={handleSubmit} className='space-y-4'>
         {errors.general && (
           <div className='flex items-center gap-2 rounded-md border border-[color-mix(in_srgb,var(--text-error)_20%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-3 py-2 text-[var(--text-error)] text-small'>
             <TriangleAlert className='size-4 shrink-0' />
@@ -358,27 +353,21 @@ export function ChatDeploy({
             isEditingExisting={!!existingChat}
           />
 
-          <div>
-            <Label
-              htmlFor='title'
-              className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'
-            >
-              Title
-            </Label>
-            <ChipInput
-              id='title'
-              placeholder='Customer Support Assistant'
-              value={formData.title}
-              onChange={(e) => updateField('title', e.target.value)}
-              required
-              disabled={chatSubmitting}
-            />
-            {errors.title && (
-              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.title}</p>
+          <ChipModalField type='custom' title='Title' htmlFor='title' error={errors.title}>
+            {(aria) => (
+              <ChipInput
+                id='title'
+                placeholder='Customer Support Assistant'
+                value={formData.title}
+                onChange={(e) => updateField('title', e.target.value)}
+                required
+                disabled={chatSubmitting}
+                {...aria}
+              />
             )}
-          </div>
+          </ChipModalField>
 
-          <div>
+          <div className='px-2'>
             <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
               Output
             </Label>
@@ -400,7 +389,7 @@ export function ChatDeploy({
             )}
           </div>
 
-          <div className='flex items-center justify-between gap-3'>
+          <div className='flex items-center justify-between gap-3 px-2'>
             <div className='min-w-0'>
               <Label className='block pl-0.5 text-[var(--text-primary)] text-small'>
                 Include thinking
@@ -414,7 +403,7 @@ export function ChatDeploy({
             />
           </div>
 
-          <div className='flex items-center justify-between gap-3'>
+          <div className='flex items-center justify-between gap-3 px-2'>
             <div className='min-w-0'>
               <Label className='block pl-0.5 text-[var(--text-primary)] text-small'>
                 Include tool calls
@@ -443,26 +432,17 @@ export function ChatDeploy({
             hasExistingPassword={existingPassword}
             error={errors.password || errors.emails}
           />
-          <div>
-            <Label
-              htmlFor='welcomeMessage'
-              className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'
-            >
-              Welcome message
-            </Label>
-            <ChipTextarea
-              id='welcomeMessage'
-              placeholder='Enter a welcome message for your chat'
-              value={formData.welcomeMessage}
-              onChange={(e) => updateField('welcomeMessage', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px]'
-            />
-            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-              This message will be displayed when users first open the chat
-            </p>
-          </div>
+          <ChipModalField
+            type='textarea'
+            title='Welcome message'
+            placeholder='Enter a welcome message for your chat'
+            value={formData.welcomeMessage}
+            onChange={(value) => updateField('welcomeMessage', value)}
+            rows={3}
+            disabled={chatSubmitting}
+            minHeight={80}
+            hint='This message will be displayed when users first open the chat'
+          />
 
           <button
             type='button'
@@ -516,7 +496,7 @@ export function ChatDeploy({
 
 function LoadingSkeleton() {
   return (
-    <div className='-mx-1 space-y-4 px-1'>
+    <div className='space-y-4 px-2'>
       <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
@@ -586,7 +566,7 @@ function IdentifierInput({
   const displayUrl = fullUrl.replace(/^https?:\/\//, '')
 
   return (
-    <div>
+    <div className='px-2'>
       <Label
         htmlFor='chat-url'
         className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'
@@ -729,7 +709,7 @@ function AuthSelector({
   }, [authOptions, authType, onAuthTypeChange])
 
   return (
-    <div className='space-y-4'>
+    <div className='space-y-4 px-2'>
       <div>
         <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
           Access control
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index a22a554173d..b02d1cc1606 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -1,15 +1,13 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useState } from 'react'
 import {
   Badge,
   Chip,
   ChipCombobox,
   ChipInput,
-  ChipTextarea,
+  ChipModalField,
   type ComboboxOption,
-  cn,
-  Label,
   Skeleton,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
@@ -133,6 +131,7 @@ export function McpDeploy({
   onActiveServerChange,
 }: McpDeployProps) {
   const params = useParams()
+  const toolNameId = useId()
   const workspaceId = params.workspaceId as string
   const [showCreateModal, setShowCreateModal] = useState(false)
 
@@ -480,7 +479,7 @@ export function McpDeploy({
 
   if (isLoadingServers || (isLoadingDeployedState && !deployedState)) {
     return (
-      <div className='-mx-1 space-y-4 px-1'>
+      <div className='space-y-4 px-2'>
         <div className='space-y-3'>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[70px]' />
@@ -522,7 +521,7 @@ export function McpDeploy({
   return (
     <form
       id='mcp-deploy-form'
-      className='-mx-1 space-y-3 px-1'
+      className='space-y-3'
       onSubmit={(e) => {
         e.preventDefault()
         handleSave()
@@ -540,49 +539,41 @@ export function McpDeploy({
         />
       ))}
 
-      <div>
-        <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
-          Tool name
-        </Label>
-        <ChipInput
-          value={toolName}
-          onChange={(e) => setToolName(e.target.value)}
-          placeholder='e.g., book_flight'
-          aria-invalid={!!toolNameError}
-          error={Boolean(toolNameError)}
-        />
-        <p
-          className={cn(
-            'mt-[6.5px] text-xs',
-            toolNameError ? 'text-[var(--text-error)]' : 'text-[var(--text-secondary)]'
-          )}
-        >
-          {toolNameError ?? 'Use lowercase letters, numbers, and underscores only'}
-        </p>
-      </div>
-
-      <div>
-        <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
-          Description
-        </Label>
-        <ChipTextarea
-          placeholder={
-            workflowDescriptionFallback
-              ? `Defaults to the workflow description: ${workflowDescriptionFallback}`
-              : 'Describe what this tool does...'
-          }
-          className='min-h-[100px]'
-          value={toolDescription}
-          onChange={(e) => setToolDescription(e.target.value)}
-        />
-      </div>
+      <ChipModalField
+        type='custom'
+        title='Tool name'
+        htmlFor={toolNameId}
+        error={toolNameError}
+        hint='Use lowercase letters, numbers, and underscores only'
+      >
+        {(aria) => (
+          <ChipInput
+            id={toolNameId}
+            value={toolName}
+            onChange={(e) => setToolName(e.target.value)}
+            placeholder='e.g., book_flight'
+            error={Boolean(toolNameError)}
+            {...aria}
+          />
+        )}
+      </ChipModalField>
+
+      <ChipModalField
+        type='textarea'
+        title='Description'
+        placeholder={
+          workflowDescriptionFallback
+            ? `Defaults to the workflow description: ${workflowDescriptionFallback}`
+            : 'Describe what this tool does...'
+        }
+        minHeight={100}
+        value={toolDescription}
+        onChange={setToolDescription}
+      />
 
       {inputFormat.length > 0 && (
-        <div>
-          <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
-            Parameters ({inputFormat.length})
-          </Label>
-          <p className='mb-[6.5px] pl-0.5 text-[var(--text-secondary)] text-xs'>
+        <ChipModalField type='custom' title={`Parameters (${inputFormat.length})`}>
+          <p className='pl-0.5 text-[var(--text-secondary)] text-xs'>
             Descriptions default to your Start block inputs; edit to override for this tool.
           </p>
           <div className='flex flex-col gap-2'>
@@ -602,60 +593,61 @@ export function McpDeploy({
                   </div>
                 </div>
                 <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                  <div className='flex flex-col gap-1.5'>
-                    <Label className='text-small'>Description</Label>
-                    <ChipInput
-                      value={
-                        parameterDescriptions[field.name] ??
-                        startBlockDescriptions[field.name] ??
-                        ''
-                      }
-                      onChange={(e) =>
-                        setParameterDescriptions((prev) => ({
-                          ...prev,
-                          [field.name]: e.target.value,
-                        }))
-                      }
-                      placeholder={startBlockDescriptions[field.name] || `Describe ${field.name}`}
-                    />
-                  </div>
+                  <ChipModalField
+                    type='input'
+                    title='Description'
+                    flush
+                    value={
+                      parameterDescriptions[field.name] ?? startBlockDescriptions[field.name] ?? ''
+                    }
+                    onChange={(value) =>
+                      setParameterDescriptions((prev) => ({
+                        ...prev,
+                        [field.name]: value,
+                      }))
+                    }
+                    placeholder={startBlockDescriptions[field.name] || `Describe ${field.name}`}
+                  />
                 </div>
               </div>
             ))}
           </div>
-        </div>
+        </ChipModalField>
       )}
 
-      <div>
-        <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
-          Servers
-        </Label>
-        <ChipCombobox
-          options={serverOptions}
-          multiSelect
-          multiSelectValues={selectedServerIdsForForm}
-          onMultiSelectChange={handleServerSelectionChange}
-          placeholder='Select servers...'
-          searchable
-          searchPlaceholder='Search servers...'
-          disabled={!toolName.trim() || !!toolNameError || isPending}
-          overlayContent={
-            <span className='truncate text-[var(--text-primary)]'>{selectedServersLabel}</span>
-          }
-        />
-        {!toolName.trim() ? (
-          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-            Enter a tool name to select servers
-          </p>
-        ) : toolNameError ? (
-          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-            Fix the tool name to select servers
-          </p>
-        ) : null}
-      </div>
+      <ChipModalField
+        type='custom'
+        title='Servers'
+        submitOnEnter={false}
+        hint={
+          !toolName.trim()
+            ? 'Enter a tool name to select servers'
+            : toolNameError
+              ? 'Fix the tool name to select servers'
+              : undefined
+        }
+      >
+        {(aria) => (
+          <ChipCombobox
+            aria-label='Servers'
+            {...aria}
+            options={serverOptions}
+            multiSelect
+            multiSelectValues={selectedServerIdsForForm}
+            onMultiSelectChange={handleServerSelectionChange}
+            placeholder='Select servers...'
+            searchable
+            searchPlaceholder='Search servers...'
+            disabled={!toolName.trim() || !!toolNameError || isPending}
+            overlayContent={
+              <span className='truncate text-[var(--text-primary)]'>{selectedServersLabel}</span>
+            }
+          />
+        )}
+      </ChipModalField>
 
       {saveErrors.length > 0 && (
-        <div className='mt-[6.5px] flex flex-col gap-0.5'>
+        <div className='mt-[6.5px] flex flex-col gap-0.5 px-2'>
           {saveErrors.map((error) => (
             <p key={error} className='text-[var(--text-error)] text-caption'>
               {error}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index d385a77ab71..31acd122b8a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -4,11 +4,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   Checkbox,
+  Chip,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalHeader,
-  cn,
 } from '@sim/emcn'
 import { ManageWorkspace } from '@sim/emcn/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -113,25 +113,22 @@ export function GroupedCheckboxList({
 
   return (
     <>
-      <Button
-        variant='ghost'
+      <Chip
+        variant='outline'
+        fullWidth
+        leftIcon={ManageWorkspace}
         disabled={disabled}
         onClick={() => setOpen(true)}
-        className={cn(
-          'flex w-full cursor-pointer justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] font-sans text-[var(--text-primary)] text-sm focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
-          'hover-hover:bg-[var(--surface-active)]'
-        )}
+        rightAdornment={
+          <SelectedCountDisplay
+            noneSelected={noneSelected}
+            allSelected={allSelected}
+            count={selectedValues.length}
+          />
+        }
       >
-        <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
-          <span className='truncate'>Configure PII Types</span>
-        </span>
-        <SelectedCountDisplay
-          noneSelected={noneSelected}
-          allSelected={allSelected}
-          count={selectedValues.length}
-        />
-      </Button>
+        Configure PII Types
+      </Chip>
       <ChipModal open={open} onOpenChange={setOpen} srTitle='Select PII Types to Detect' size='lg'>
         <ChipModalHeader onClose={() => setOpen(false)}>Select PII Types to Detect</ChipModalHeader>
         <ChipModalBody onWheel={(e) => e.stopPropagation()}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
index 4ffb44d9739..13dd81199df 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
@@ -1,7 +1,16 @@
 'use client'
 
 import { type ReactNode, useCallback, useMemo, useState } from 'react'
-import { Checkbox, ChipInput, cn, Label, SecretInput, Tooltip, Wizard } from '@sim/emcn'
+import {
+  Checkbox,
+  ChipInput,
+  ChipModalField,
+  cn,
+  Label,
+  SecretInput,
+  Tooltip,
+  Wizard,
+} from '@sim/emcn'
 import { Check, ChevronRight, CircleInfo, Clipboard } from '@sim/emcn/icons'
 import { useShallow } from 'zustand/react/shallow'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
@@ -213,23 +222,20 @@ function StepConfigure({
 }: StepConfigureProps) {
   return (
     <div className='space-y-4'>
-      <div className='space-y-1.5'>
-        <Label
-          htmlFor={`${blockId}-wizard-bot-name`}
-          className='text-[var(--text-secondary)] text-xs'
-        >
-          Bot name
-        </Label>
-        <ChipInput
-          id={`${blockId}-wizard-bot-name`}
-          value={appName}
-          onChange={(e) => onAppNameChange(e.target.value)}
-          disabled={disabled}
-          placeholder={DEFAULT_APP_NAME}
-          className='h-9'
-        />
-      </div>
-      <div className='grid grid-cols-2 gap-x-4 gap-y-4'>
+      <ChipModalField type='custom' title='Bot name' htmlFor={`${blockId}-wizard-bot-name`}>
+        {(aria) => (
+          <ChipInput
+            id={`${blockId}-wizard-bot-name`}
+            value={appName}
+            onChange={(e) => onAppNameChange(e.target.value)}
+            disabled={disabled}
+            placeholder={DEFAULT_APP_NAME}
+            className='h-9'
+            {...aria}
+          />
+        )}
+      </ChipModalField>
+      <div className='grid grid-cols-2 gap-x-4 gap-y-4 px-2'>
         {GROUP_ORDER.map((group) => {
           const items = SLACK_CAPABILITIES.filter((c) => c.group === group)
           if (items.length === 0) return null
diff --git a/packages/emcn/src/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx
index acbc4226246..a1d70082ff6 100644
--- a/packages/emcn/src/components/chip-input/chip-input.test.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx
@@ -30,6 +30,19 @@ afterEach(() => {
 })
 
 describe('ChipInput', () => {
+  it.each([undefined, 'lg'] as const)(
+    'emits a single height for size %s without forwarding it to the native field',
+    (size) => {
+      const input = mount(<ChipInput size={size} disabled aria-label='Search' />)
+      const heights = input.parentElement?.className
+        .split(' ')
+        .filter((token) => token.startsWith('h-'))
+      expect(heights).toEqual([size === 'lg' ? 'h-9' : 'h-[30px]'])
+      expect(input.hasAttribute('size')).toBe(false)
+      expect(input.disabled).toBe(true)
+    }
+  )
+
   it('keeps the focused input mounted when custom leading content changes', () => {
     const input = mount()
     const render = (color: string) => (
@@ -76,7 +89,7 @@ describe('chip form controls', () => {
           error
           aria-invalid
           aria-describedby='error'
-          className='h-[34px]'
+          size='lg'
         />
         <p id='error'>Enter a work email</p>
         <ChipTextarea
@@ -93,7 +106,7 @@ describe('chip form controls', () => {
     expect(input.labels?.[0].textContent).toBe('Work email')
     expect(input.getAttribute('aria-describedby')).toBe('error')
     expect(input.getAttribute('aria-invalid')).toBe('true')
-    expect(input.parentElement?.className).toContain('h-[34px]')
+    expect(input.parentElement?.className).toContain('h-9')
     expect(input.parentElement?.className).toContain('border-[var(--text-error)]')
     expect(textareaRef.current?.rows).toBe(3)
     expect(textareaRef.current?.className).toContain('min-h-[80px]')
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 444cbb1704a..3c5d7d1f161 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -28,11 +28,19 @@
  */
 import * as React from 'react'
 import { cn } from '../../lib/cn'
-import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
+import {
+  chipContentGeometryClass,
+  chipFieldSurfaceClass,
+  chipFieldTextClass,
+  chipRadiusClass,
+  chipSizeClasses,
+} from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
 export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Control height: 30px by default, or the larger 36px auth spacing scale. */
+  size?: keyof typeof chipSizeClasses
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
   /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
@@ -62,6 +70,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       error,
       disabled,
       type = 'text',
+      size = 'md',
       ...props
     },
     ref
@@ -69,7 +78,9 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
     <div
       className={cn(
         'flex w-full',
-        chipGeometryClass,
+        chipContentGeometryClass,
+        chipRadiusClass,
+        chipSizeClasses[size],
         chipFieldSurfaceClass,
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.test.tsx b/packages/emcn/src/components/chip-modal/chip-modal.test.tsx
index 53a6a1dd16b..69f8ab0793e 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.test.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.test.tsx
@@ -645,6 +645,44 @@ describe('ChipModal default actions', () => {
     expect(onPrimary).not.toHaveBeenCalled()
   })
 
+  it('associates a custom field label and error without replacing native validation', () => {
+    const onPrimary = vi.fn()
+    mount(
+      <ChipModal open onOpenChange={() => {}} srTitle='Custom form field'>
+        <ChipModalHeader onClose={() => {}}>Custom form field</ChipModalHeader>
+        <ChipModalBody>
+          <form onSubmit={(event) => event.preventDefault()}>
+            <ChipModalField
+              type='custom'
+              title='Title'
+              htmlFor='custom-title'
+              error='Enter a title'
+            >
+              {(aria) => (
+                <ChipInput id='custom-title' value='' onChange={() => {}} required {...aria} />
+              )}
+            </ChipModalField>
+          </form>
+        </ChipModalBody>
+        <ChipModalFooter
+          onCancel={() => {}}
+          primaryAction={{ label: 'Save', onClick: onPrimary }}
+        />
+      </ChipModal>
+    )
+
+    const input = document.querySelector<HTMLInputElement>('#custom-title')
+    if (!input) throw new Error('Custom form field did not render')
+    expect(input.labels?.[0]?.textContent).toBe('Title')
+    expect(input.validity.valueMissing).toBe(true)
+    expect(input.getAttribute('aria-invalid')).toBe('true')
+    expect(document.getElementById(input.getAttribute('aria-describedby')!)?.textContent).toBe(
+      'Enter a title'
+    )
+    expect(pressEnter(input).defaultPrevented).toBe(false)
+    expect(onPrimary).not.toHaveBeenCalled()
+  })
+
   it('yields Enter to multiline, tag-like and autocomplete controls', () => {
     const onPrimary = vi.fn()
     mount(
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index e7d07245b2b..9bedfd58d4e 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -734,6 +734,8 @@ export interface ChipModalFieldAria {
 
 interface ChipModalCustomFieldProps extends ChipModalFieldBaseProps {
   type: 'custom'
+  /** Associates the field label with the custom control's existing ID. */
+  htmlFor?: string
   /**
    * Whether Enter in a nested plain single-line input should trigger the
    * footer's default primary action. Set `false` when the custom control owns
@@ -788,7 +790,10 @@ function ChipModalField(props: ChipModalFieldProps) {
     props.type === 'file' ||
     props.type === 'emails'
   const label = (
-    <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
+    <Label
+      htmlFor={props.type === 'custom' ? props.htmlFor : associatesLabel ? id : undefined}
+      className='pl-0.5 text-[var(--text-muted)]'
+    >
       {title}
       {required && (
         <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index 84c1fb201e4..b9e95d45ff4 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -51,6 +51,10 @@ export const chipContentGap = 'gap-1.5'
 
 /** Standard chip height, also shared by combobox fields. */
 export const chipHeightClass = 'h-[30px]'
+/** Shared control heights. Large controls follow the auth spacing scale. */
+export const chipSizeClasses = { md: chipHeightClass, lg: 'h-9' } as const
+/** Chip content geometry without height or radius, for sized controls. */
+export const chipContentGeometryClass = `items-center ${chipContentGap} px-2 text-left text-sm`
 
 /**
  * Chip pill geometry minus its corner radius — height, centering, gap, padding,
@@ -58,7 +62,7 @@ export const chipHeightClass = 'h-[30px]'
  * (non-`cn`) consumer never emits two competing radii; everything else reads
  * {@link chipGeometryClass}, which adds the default radius back.
  */
-export const chipGeometryUnroundedClass = `${chipHeightClass} items-center ${chipContentGap} px-2 text-left text-sm`
+export const chipGeometryUnroundedClass = `${chipHeightClass} ${chipContentGeometryClass}`
 /**
  * Chip pill geometry — height, centering, gap, radius, padding, text size — with
  * NO interactivity (no `cursor-pointer`, no hover). `chipVariants` composes this
diff --git a/packages/emcn/src/components/chip/chip.test.tsx b/packages/emcn/src/components/chip/chip.test.tsx
new file mode 100644
index 00000000000..7ca71576436
--- /dev/null
+++ b/packages/emcn/src/components/chip/chip.test.tsx
@@ -0,0 +1,93 @@
+/** @vitest-environment jsdom */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Chip, ChipLink, chipVariants } from './chip'
+import { chipGeometryClass, chipGeometryUnroundedClass } from './chip-chrome'
+
+describe('Chip geometry', () => {
+  it.each([undefined, 'lg'] as const)(
+    'uses one height for raw variants, buttons and links at size %s',
+    (size) => {
+      const height = size === 'lg' ? 'h-9' : 'h-[30px]'
+      expect(
+        chipVariants({ size })
+          .split(' ')
+          .filter((token) => token.startsWith('h-'))
+      ).toEqual([height])
+      for (const node of [
+        <Chip key='button' size={size}>
+          Continue
+        </Chip>,
+        <ChipLink key='link' size={size} href='/workspace'>
+          Continue
+        </ChipLink>,
+      ]) {
+        const markup = renderToStaticMarkup(node)
+        expect(markup).toContain(height)
+        expect(markup).not.toContain(size === 'lg' ? 'h-[30px]' : 'h-9')
+        expect(markup).not.toMatch(/ size=/)
+      }
+      expect(chipGeometryUnroundedClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('rounded-lg')
+    }
+  )
+
+  it('centers the icon and label without preventing long text from shrinking', () => {
+    const markup = renderToStaticMarkup(
+      <Chip fullWidth align='center' leftAdornment={<svg aria-hidden />}>
+        Continue with your identity provider
+      </Chip>
+    )
+    expect(markup).toContain('justify-center')
+    expect(markup).toContain('flex-initial')
+    expect(markup).toContain('min-w-0')
+    expect(markup).not.toContain('flex-none')
+    expect(markup).not.toMatch(/ align=/)
+  })
+
+  it('preserves native refs, focus, submission, disabled actions and link navigation', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const button = createRef<HTMLButtonElement>()
+    const link = createRef<HTMLAnchorElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Chip ref={button} size='lg' align='center' fullWidth type='submit' disabled={disabled}>
+              <strong>Continue</strong>
+            </Chip>
+            <ChipLink ref={link} size='lg' align='center' href='/workspace'>
+              <strong>Workspace</strong>
+            </ChipLink>
+          </form>
+        )
+      )
+    try {
+      render(false)
+      button.current?.focus()
+      expect(document.activeElement).toBe(button.current)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(link.current?.getAttribute('href')).toBe('/workspace')
+      render(true)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(button.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index 5b333032762..d8d3fbd2494 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -14,17 +14,18 @@ import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-t
 import {
   chipActiveSurfaceClass,
   chipBorderShadowRing,
+  chipContentGeometryClass,
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
-  chipGeometryUnroundedClass,
   chipHoverSurfaceClass,
   chipPrimaryFillTokens,
   chipRadiusClass,
+  chipSizeClasses,
 } from './chip-chrome'
 
 /**
- * 30px pill — the platform's most common chrome pattern.
+ * 30px pill (36px with `size="lg"` at the default root font size) — the platform's most common chrome pattern.
  *
  * Render targets:
  * - {@link Chip} → `<button>`
@@ -41,6 +42,7 @@ import {
  * `border` (the `border-shadow` shadow ring on a transparent surface — an outline drawn purely via box-shadow,
  * no CSS border, no fill); outline (a true border with no shadow or hover fill).
  * `active` renders the default/filled chip in its selected state — `--surface-active`, held through hover.
+ * `align="center"` centers the complete icon/label group while allowing long labels to shrink.
  * `fullWidth` swaps `inline-flex` for block-level `flex`.
  * `shape` picks the corner radius: the implicit `default` is the `rounded-lg` pill; `round` is fully round
  * (`rounded-full`) for a chip sitting in a row of round controls. The radius lives in this variant rather than
@@ -60,7 +62,7 @@ import {
  * {@link chipHoverSurfaceClass}.
  */
 const chipVariants = cva(
-  `group cursor-pointer ${chipGeometryUnroundedClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
+  `group cursor-pointer ${chipContentGeometryClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
   {
     variants: {
       variant: {
@@ -74,6 +76,8 @@ const chipVariants = cva(
         outline:
           'border border-[var(--border)] bg-transparent hover-hover:border-[color-mix(in_srgb,var(--border)_80%,var(--text-secondary))]',
       },
+      size: chipSizeClasses,
+      align: { start: '', center: 'justify-center' },
       shape: { default: chipRadiusClass, round: 'rounded-full' },
       active: { true: '', false: '' },
       fullWidth: { true: 'flex w-full', false: 'inline-flex' },
@@ -82,7 +86,14 @@ const chipVariants = cva(
       { variant: ['default', 'filled'], active: false, className: chipHoverSurfaceClass },
       { variant: ['default', 'filled'], active: true, className: chipActiveSurfaceClass },
     ],
-    defaultVariants: { variant: 'default', shape: 'default', active: false, fullWidth: false },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      align: 'start',
+      shape: 'default',
+      active: false,
+      fullWidth: false,
+    },
   }
 )
 
@@ -116,6 +127,7 @@ interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant
  */
 function ChipContent({
   variant,
+  align,
   leftIcon: LeftIcon,
   leftAdornment,
   rightIcon: RightIcon,
@@ -124,7 +136,11 @@ function ChipContent({
 }: ChipBaseProps) {
   const isInverse = variant === 'primary' || variant === 'destructive'
   const iconClass = cn(chipContentIconClass, isInverse && 'text-current')
-  const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
+  const labelClass = cn(
+    chipContentLabelClass,
+    align === 'center' ? 'flex-initial' : 'flex-1',
+    isInverse && 'text-current'
+  )
   const textLabel =
     typeof children === 'string' || typeof children === 'number' ? String(children) : null
   return (
@@ -151,6 +167,8 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -168,11 +186,12 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     <button
       ref={ref}
       type={type ?? 'button'}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}
@@ -196,6 +215,8 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -211,11 +232,12 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   return (
     <Link
       ref={ref}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}