Note

This documentation describes the Textbox Vue component for native UI views, for Xml templates see textbox.

A full-featured text input supporting single-line and multi-line modes, with label, validation, AI suggestion overlay, clear button, and speech input.

Import

import { Textbox } from '@neos/design-system'

Shared Input Props

All input components share the following base props:

Prop	Type	Default	Description
`label`	`string`	`undefined`	Field label text
`labelPosition`	`'top' \\| 'left' \\| 'right' \\| 'hidden'`	`undefined`	Label placement relative to the input
`required`	`boolean`	`false`	Marks the field as required
`readonly`	`boolean`	`false`	Renders the field as read-only
`disabled`	`boolean`	`false`	Disables the field
`messageText`	`string`	`undefined`	Validation message text
`messageSeverity`	`'info' \\| 'warning' \\| 'danger'`	`undefined`	Validation message color
`messagePosition`	`'bottom' \\| 'hidden'`	`undefined`	Validation message placement
`documentation`	`string`	`undefined`	Help text shown in a documentation popover
`placeholder`	`string`	`undefined`	Placeholder text
`tabStop`	`boolean`	`true`	Include in tab order
`inputDisplayMode`	`'form' \\| 'datagrid'`	`'form'`	Adjusts rendering for inline datagrid editing
`aiSuggestion`	`AiSuggestion`	`undefined`	AI suggestion object (shows accept/cancel overlay)
`focused`	`boolean`	`undefined`	Programmatic focus (v-model)

Textbox-Specific Props

Prop	Type	Default	Description
`modelValue`	`string \\| null`	`null`	Bound value (v-model)
`updateMode`	`'default' \\| 'immediate'`	`'default'`	`'default'` updates on blur/enter; `'immediate'` on every keystroke
`maxLength`	`number`	`undefined`	Maximum character count
`multiLines`	`boolean`	`false`	Render as `<textarea>`
`rows`	`number`	`10`	Number of visible rows in multi-line mode
`tooltip`	`string \\| null`	`undefined`	Native title tooltip on the input
`clear`	`boolean`	`false`	Show a clear (×) button
`speech`	`boolean \\| 'immediate'`	`false`	Enable speech-to-text input
`characterCasing`	`string`	`undefined`	Auto-casing applied to input (`'upper'`, `'lower'`, `'title'`)
`whiteSpaceHandling`	`WhiteSpaceHandling`	`undefined`	Whitespace normalization mode
`contentClass`	`ContentClass`	`undefined`	Class of the text box
`contentStyle`	`ContentStyle`	`undefined`	Style of the text box

Emits

Event	Payload	Description
`update:modelValue`	`string \\| null`	Value change
`input`	`string`	Fired on every keystroke
`keydown`	`KeyboardEvent`	Forwarded keydown events
`listeningToSpeech`	`boolean`	Speech recognition start/stop
`aiApply`	—	AI suggestion accepted
`aiCancel`	—	AI suggestion dismissed
`update:focused`	`boolean`	Focus state change

Slots

Slot	Description
`before`	Content rendered before the input (e.g. prefix icon)
`default`	Content rendered after the input (alongside the clear/speech area)

Usage Examples

Basic text input

<Textbox v-model="name" label="Name" />

Multi-line textarea

<Textbox v-model="description" label="Description" :multi-lines="true" :rows="5" />

With clear button and immediate update

<Textbox v-model="search" placeholder="Search…" :clear="true" update-mode="immediate" />

Required with validation

<Textbox
  v-model="email"
  label="Email"
  :required="true"
  message-text="Invalid email address"
  message-severity="danger"
/>

Left label layout

<Textbox v-model="code" label="Product Code" label-position="left" />

With prefix slot

<Textbox v-model="url" label="Website">
  <template #before>
    <Text size="small">https://</Text>
  </template>
</Textbox>

Table of Contents