Component Catalog

TextField

Text input — single-line or multi-line based on variant.

A2UI → Nuxt UI Mapping

A2UI Variant	Nuxt UI Component
`"short"` (default)	`UInput`
`"long"`	`UTextarea`

Example JSONL

{"version":"v0.10","createSurface":{"surfaceId":"tf_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"tf_demo","components":[
  {"id":"root","component":"Column","children":["name","email","bio"]},
  {"id":"name","component":"TextField","label":"Full Name","placeholder":"John Doe"},
  {"id":"email","component":"TextField","label":"Email","placeholder":"john@example.com"},
  {"id":"bio","component":"TextField","label":"Bio","placeholder":"Tell us about yourself...","variant":"long"}
]}}

Properties

Property	Type	Required	Default	Description
`label`	string	✅	—	Input label
`placeholder`	string	—	—	Placeholder text
`variant`	enum	—	`"short"`	`"short"` → `UInput`, `"long"` → `UTextarea`
`value`	string	—	`""`	Current input value

Rendering Details

Wraps in a <div> with label above the input
Uses v-model for two-way data binding
UInput for single-line text, UTextarea for multi-line

Try It

Copy the JSONL above and paste it in the Playground Paste tab.

Divider

Visual separator between sections.

CheckBox

Toggle input with label and boolean value.