form · Normal DOM + Twenty Remote DOM

InputShell

The "looks like a text input" chrome, generic over its content.

Bordered input-style container that accepts anything inside — a chip (selected record), a bare native input (free-text), an icon + label, a date display. Pairs with EntityChip for picker triggers and with a native <input> for free-text fields without depending on our Radix-based Input primitive.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { InputShell } from '@8maverik8/twenty-design';

Examples

With EntityChip (interactive — opens picker)

Creomate · Bundle (WebAPI + Webhook) · 32 SC

tsx
<InputShell interactive onClick={togglePicker}>
  <EntityChip name="Creomate · Bundle (WebAPI + Webhook) · 32 SC" />
</InputShell>

With native <input>

tsx
<InputShell>
  <input
    type="text"
    value={name}
    onChange={(e) => setName(e.target.value)}
    style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', /* etc */ }}
  />
</InputShell>

States

Select product…

Field is required

Disabled

tsx
<InputShell interactive>…</InputShell>
<InputShell invalid>…</InputShell>
<InputShell disabled>…</InputShell>

Variants

interactive

falsedefaultPassive chrome — for free-text inputs.

trueClick-target — hover bg + pointer cursor. Opens a picker.

state

defaultdefaultStandard bordered container.

invalidRed border + matching focus ring.

disabledDimmed + not-allowed cursor.

Guidelines

✓

Use it as the wrapper inside LineItemCard headers for both chip and free-text cases.Two-mode header reads as one consistent input affordance across the row list.

Reach for it when our root <Input> is enough.For plain Normal-DOM forms, Input + Field is the canonical pair. InputShell is for Remote-DOM-compatible inline content or non-input children.