Text Input

One line of typed text, in a box that owns its own edge.

import { TextInput } from "@dede-style/ui/text-input", then <TextInput value={v} onChange={setV} />. It is controlled, and onChange hands over the string rather than the event, so the DOM stays out of every call site. Put it in a Field to give it a name.

Prop	Description	Default	Control
value	the text. Controlled: pass it with onChange
type	what is being typed: text, email, password, tel, url, search or number. Sets the keyboard and browser behaviour`textemailpasswordtelurlsearchnumber`	`text`	text email password tel url search number
variant	frame (default) draws the box; plain has no box, for a search in a toolbar. Give a plain field an icon or placeholder`frameplain`	`frame`	frameplain
size	height: 32, 40 (default) or 48px, matching Button`81012`	`10`	8 10 12
width	how many characters the box fits, as a hint of the expected length. full fills the container`23451020full`	`full`	2 3 4 5 10 20 full
placeholder	an example of the format, shown until something is typed. Not a label
prefix	text at the start of the box, such as a currency sign
prefixIcon	an icon at the start of the box. In code, import it by its full name: icon plus this (Search is iconSearch)`noneAlertAlertFillArrowDownArrowLeftArrowRightArrowUpBag`+91 more	`none`	none Alert AlertFill ArrowDown ArrowLeft ArrowRight ArrowUp Bag Bell BellRing BellSlash Bluetooth Bookmark BookmarkFill Calendar Camera Cart Check CheckBold Checkbox CheckboxChecked CheckboxMixed ChevronDown ChevronLeft ChevronRight ChevronUp ChevronsDownUp ChevronsLeft ChevronsRight ChevronsUpDown Clock Close Code CodeAlt Cookie Copy CreditCard DataChart DataColumns DataGrid DataRows Delete Download DragHandle Edit Email Error ErrorFill ExternalLink Eye EyeSlash File Filter Folder Github Heart HeartFill Help HelpFill Home Image Info InfoFill Link Lock LockOpen LogOut Menu Minus MinusBold Moon MoreHorizontal MoreVertical Pause Placeholder Play Plus Radio RadioChecked Refresh Search Settings Share Shield Star StarFill Stop Success SuccessFill Sun SwapVertical Tag TagFill Upload User Warning WarningFill Wifi WifiSlash
suffix	text at the end of the box, such as a unit
suffixIcon	an icon at the end of the box`noneAlertAlertFillArrowDownArrowLeftArrowRightArrowUpBag`+91 more	`none`	none Alert AlertFill ArrowDown ArrowLeft ArrowRight ArrowUp Bag Bell BellRing BellSlash Bluetooth Bookmark BookmarkFill Calendar Camera Cart Check CheckBold Checkbox CheckboxChecked CheckboxMixed ChevronDown ChevronLeft ChevronRight ChevronUp ChevronsDownUp ChevronsLeft ChevronsRight ChevronsUpDown Clock Close Code CodeAlt Cookie Copy CreditCard DataChart DataColumns DataGrid DataRows Delete Download DragHandle Edit Email Error ErrorFill ExternalLink Eye EyeSlash File Filter Folder Github Heart HeartFill Help HelpFill Home Image Info InfoFill Link Lock LockOpen LogOut Menu Minus MinusBold Moon MoreHorizontal MoreVertical Pause Placeholder Play Plus Radio RadioChecked Refresh Search Settings Share Shield Star StarFill Stop Success SuccessFill Sun SwapVertical Tag TagFill Upload User Warning WarningFill Wifi WifiSlash
required	requires a value before the form submits. No asterisk is shown; mark optional fields in their label	`false`	required
disabled	disables the field and dims it. Prefer readOnly when the value should still be read or copied	`false`	disabled
readOnly	the value can be read, selected and copied, and is submitted, but not edited	`false`	readOnly
maxLength	the most characters allowed

Tokens

What a theme can move, where the props above are what an instance can move.

Token	Description	Value
--text-input-radius	the corner. No suffix, like --card-radius and unlike --button-radius-rounded, because there is no shape prop carving out one case of three — this is the radius of text inputs. It resolves to --radius-4 by default, the same step Button's rounded shape and Card both take, so a field and the button beside it agree unless a theme deliberately separates them	--radius-4

A token appears here only when the value is not already reachable. Anything that resolves through a foundation token or a role needs none, because overriding that already moves it — and a second dial wired to the same value would let this one component drift from everything sharing the role. What is left is the values with no other lever at all.

These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.