Skip to content
DOL Studio

Input

Design: Stable Code: Coded formtext-entry 91 Figma sets 267 standalone Input content/General

Live preview

4 sizes — sm / md / md-sub / lg

Padding + font scale together. Auto-fit grid: cells ≥ 240px wide, container fits as many as room allows.
inputSize="sm"
inputSize="md"
inputSize="md-sub"
inputSize="lg"

With addons (prefix / suffix)

3 compositions — phone prefix · domain suffix · currency (both sides). Auto-fit grid (cellMinWidth=280px) ensures each composition has enough room for label + Code button.
leftAddon: +84
rightAddon: .com
left + right: $ / USD

With inline icons

2 compositions — leading mail icon · readOnly with leading + trailing check icon. Auto-fit grid 280px.
leftIcon: mail
left + right + readOnly

States

3 disabled-axis states — `invalid` (red ring) / `disabled` (slate, no interaction) / `readOnly` (no caret, no border highlight on focus). Auto-fit grid: cellMinWidth=240px.
state="invalid"
state="disabled"
state="readOnly"

Info tone (blue focus)

Use `tone="info"` when input is informational (search bar in a wiki, chat compose). Replaces brand-red focus ring with info-blue.
tone="info" · blue focus ring instead of brand red

Import & files

Import
import { Input } from "@dol/ui/form";
Source file
packages/@dol/ui/src/form/Input.tsx

Spec

Spec Props · Axes · Usage

Props

Prop Type Default Description
label string - —
helperText string - —
error string - —
size 'sm' | 'md' | 'lg' 'md' —

Variants · Tones · Sizes

Sizes
smmdlg

Usage

Primary form field. Pairs with `<label>`; if no explicit label, provide `aria-label`.

Examples

Examples 2
  • Text field with label
  • Error state

Figma source

Figma source 91 sets
Page
Input
Sets
91 + 267 standalone
Primary set
Input content/General · 6 variants Open in Figma →
Showing: Input content/General
11 other sets (+ 79 more not listed)
  • Code verify input - Outline 4 variants Figma →
  • Code verify input - Solid 4 variants Figma →
  • Input content/Date & time/Date input 4 variants Figma →
  • Input content/Date & time/Duration input 3 variants Figma →
  • Input content/Date & time/Range date picker 4 variants Figma →
  • Input content/Date & time/Set time limit, hh-mm-ss 3 variants Figma →
  • Input content/Date & time/Set time, mm-ss 3 variants Figma →
  • Input content/Date & time/Single date picker 4 variants Figma →
  • Input content/Date & time/Time input 3 variants Figma →
  • Input content/Date & time/Time range 3 variants Figma →
  • Input content/Dropdown, Select 11 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Input
Slug: `input`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Text input field, the largest component family in the DS (87 sets, 267 standalone - incl. country-flag selectors + subtext variants). Code parity: base text Input only.


## Import
```ts
import { Input } from "@dol/ui/form";
```
Source: `packages/@dol/ui/src/form/Input.tsx`


## Props (4)
| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | - |  |
| `helperText` | `string` | - |  |
| `error` | `string` | - |  |
| `size` | `'sm' | 'md' | 'lg'` | 'md' |  |


## Axes
Sizes: `sm`, `md`, `lg`


## Usage
Primary form field. Pairs with `<label>`; if no explicit label, provide `aria-label`.


## Examples
- **Text field with label**
- **Error state**


## Figma source
Page: Input
Sets: 91
Primary: Input content/General
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7834-85742

Related

  • KidInput

    KIDCoded

  • Select input

    Coded

  • Uploader

    Coded

  • DatePicker

    Coded

  • Slider

    Coded
  • Label

    Checkbox

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).