Text field

Primitive Inputs and selection draft Gen UI part Needs action

Free text the user types. Use it when no choice list fits.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/text-field.css and read only tokens. Wrap markup in .v-root.

Rendered markup of the anatomy example

Props and slots

The component API. Gen UI JSON uses these names, and the Flutter widget should mirror them.

Props

Prop	Values	Default
`label`	string
`value`	string
`placeholder`	string
`variant`	outlined \| filled	outlined
`shape`	pill \| rect	pill
`icon`	add \| alert \| arrow-left \| arrow-right \| arrow-up \| bell \| calendar \| card \| chat-add \| chat \| check-sweep-clean \| check \| chevron-down \| chevron-right \| clock \| delete-x-circle \| delete-x \| edit \| gift \| globe \| home \| info \| lock \| mail \| mic \| more \| phone \| pin \| qr \| receipt \| search \| send \| shield-check \| shield \| sparkle \| star \| sun \| trash \| undo \| upload \| users-add \| users \| utensils
`helper`	string
`error`	boolean
`disabled`	boolean
`mono`	boolean
`strong`	boolean
`trailing`	part
`action *`	string. Action name, e.g. "plan.open" or "pay.share". The part before the dot is the action type.
`payload`	object

* required.

Slot rules

trailing: Button.

In Gen UI

How VelioBot uses this part. The bot returns JSON; the validator checks it; the renderer draws it.

JSON node

Every node may also carry id, grow, attribution, privateOnly and fallbackText. Interactive: the node must carry an action, and taps emit { action, payload }.

Rules that name this part

sheet-children Bottom sheet children: Section, List, KeyValue, TextField, ActionRow.

Usage in recipes

5 of the original cards use it. After V1. Priority table

Bot functions: Bill split and payments, Calendar and itinerary, Group plans, Occasions and events, Onboarding and profile, Plan capture, Trust and vouches, Voice calls with notes.