Skip to content
DOL Studio

KidInput

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

Live preview

4 state variants

Default / inputted with helper / invalid with error / disabled. Auto-fit grid: cellMinWidth=280px (KidInput needs label + helper room).
state=default

With helper text below

state="inputted"
Message Text
state="invalid"
state="disabled"

3 sizes — sm / md / lg

Per KID DS, KidInput supports 3 sizes. Auto-fit grid: cellMinWidth=200px.
inputSize="sm"
inputSize="md"
inputSize="lg"

Import & files

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

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. 

# KidInput
Slug: `input`
Domain: kid · 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 { KidInput } from "@dol/ui/kid";
```
Source: `packages/@dol/ui/src/kid/KidInput.tsx`


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

Related

  • Input

    Coded
  • Label

    KidCheckbox

    KIDCoded

  • Select input

    Coded

  • Uploader

    Coded

  • DatePicker

    Coded

  • Slider

    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).