form · Normal DOM only

Input

Single-line text entry — token-driven hover, focus ring, validity styling.

Use Input for any short string value: workspace name, slug, email, phone, free-form notes. Pair with Field for label + hint + error semantics. For dense lists or table-inline editing use size="sm".

Install

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

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

Examples

Basic

Pair with Field to get a labelled, accessible group out of the box.

tsx
<Field label="Workspace name" required>
  {({ id }) => <Input id={id} fullWidth placeholder="Acme Inc." />}
</Field>

Sizes

Match the input height to the surrounding form density.

tsx
<Input size="sm" placeholder="Small (24 px)" />
<Input size="md" placeholder="Medium (32 px)" />

With slots

startSlot for type hints, endSlot for units, badges, or a dropdown caret.

tsx
<Input startSlot={<IconMail size={14} stroke={2} />} placeholder="you@example.com" />

Invalid & disabled

invalid switches the border to --t-color-red and the focus ring to red transparent. Disabled is set via the disabled prop, not CSS.

tsx
<Input invalid defaultValue="not-an-email" />
<Input disabled defaultValue="Locked field" />

Variants

size
sm24 px tall — dense lists, table inline-edit cells.
mddefault32 px tall — default form surface (settings, dialogs).

Guidelines

✓
Wrap an Input in Field when it has a label, hint, or error.Field wires the label↔input via htmlFor and renders hint/error next to the control with correct typography.
✓
Use startSlot for icons that disambiguate the value (mail, money, URL).Icons cut the user’s scanning time roughly in half on multi-field forms.
✕
Use a bare Input as a "search this list" field.SearchInput already ships the magnifier icon, clearable affordance, and type="search" semantics.
✕
Hide errors in the placeholder.Placeholders disappear on focus — pass the message to Field’s error prop so it stays visible.