---
title: "Input"
url: "https://developer.incode.com/design-and-ux/input/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Input

Inputs collect text from users. Prizma includes a standard text field, OTP cells for verification codes, and a multiline variant. All inputs share the same token layer for border, surface, and typography.

## Try it live

Click in and type — focus ring and placeholder come from the input tokens.

<div class="dh-demo"><p class="dh-demo-label">Interactive — focus / type</p><input class="dh-pz-input" type="text" placeholder="Full legal name" /><input class="dh-pz-input" type="text" placeholder="Disabled state" disabled /></div>

<div class="dh-rule"><span>Variants</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-field">Full name</span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Text field</span><code>.input</code><p>The standard single-line field for names, emails, and free text.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-otp"><b>1</b><b>2</b><b class="is-focus"></b><b></b></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">OTP cells</span><code>.input-otp</code><p>One cell per digit for verification codes. Focus advances automatically.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-field" style="height:88px;align-items:flex-start;padding-top:12px"><span style="color:#82879a">Tell us more…</span></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#9ca3af14;color:#9ca3af">Multiline</span><code>.input-multiline</code><p>Grows for longer answers; used for notes and feedback.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--input-surface-default | Input background | Component
--input-border-default | Border — rest | Component
--input-border-focus | Border — focused | Component
--input-border-error | Border — error | Component
--input-border-disabled | Border — disabled | Component
--input-text-default | Input text color | Component
--input-placeholder | Placeholder text color | Component
--input-helper-error | Error helper text color | Component
--radius-input | Corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.