InputTextView

Updated: Sep 24, 2026

Use InputTextView when a Web App needs free-form text from someone using Meta Ray-Ban Display glasses. Activating the field opens the system input dialog on the glasses. When input is complete, the component displays the current text and reports changes to the application.

The field grows from one to three visible lines and then scrolls overflowing text. It can also show loading feedback and a separate action button.

Usage

import {InputTextView} from '@wearables-ui-toolkit/mrbd';

export function MessageComposer({
  sendLabel,
  hint,
  onSend,
}: {
  sendLabel: string;
  hint: string;
  onSend: (text: string) => void;
}) {
  return (
    <InputTextView
      hint={hint}
      actionLabel={sendLabel}
      onSend={onSend}
    />
  );
}

Use a controlled value when validation, submission, or route state owns the text:

import {useState} from 'react';
import {InputTextView} from '@wearables-ui-toolkit/mrbd';

export function ControlledComposer({
  sendLabel,
  submitMessage,
}: {
  sendLabel: string;
  submitMessage: (text: string) => void;
}) {
  const [text, setText] = useState('');

  return (
    <InputTextView
      text={text}
      onTextChange={setText}
      onSend={message => {
        submitMessage(message);
        setText('');
      }}
      actionLabel={sendLabel}
    />
  );
}

The component and its public types are exported from the package root and from its own subpath:

import {
  InputTextView,
  InputTextViewSize,
  type InputTextViewInputProps,
  type InputTextViewProps,
} from '@wearables-ui-toolkit/mrbd/InputTextView';

Props

The full prop type is InputTextViewProps.

Prop	Type	Default	Description
`text`	`string`	—	Controlled text value.
`defaultText`	`string`	`''`	Initial text for uncontrolled usage.
`hint`	`string`	`'Start writing'`	Placeholder and default accessible name. Pass localized copy.
`size`	`InputTextViewSize`	`InputTextViewSize.FULL`	Full-width or compact-while-empty layout.
`material`	`ContainerMaterial`	`MaterialLibrary.textInput()`	Material for the input field.
`showLoader`	`boolean`	`false`	Shows loading feedback within the field.
`loadingLabel`	`string`	`'Loading'`	Accessible label for the loading state. Pass a localized label.
`actionIcon`	`IconSource`	paper airplane	Icon for the optional action.
`actionButtonMaterial`	`ContainerMaterial`	`MaterialLibrary.outboundMessage()`	Material for the optional action button.
`actionLabel`	`string`	`'Send'`	Accessible label for the optional action. Pass a localized label.
`showActionButton`	`boolean`	`true`	Whether to show the separate action button when `onSend` is set. Submission from the system input dialog remains available when the button is hidden.
`onSend`	`(text: string) => void`	—	Enables submission and receives submitted text.
`onTextChange`	`(text: string) => void`	—	Called when the text changes.
`inputProps`	`InputTextViewInputProps`	`{}`	Additional text-input attributes, including form, validation, and accessibility attributes.
`className`	`string`	`''`	Additional class on the component.
`style`	`CSSProperties`	`{}`	Additional inline styles on the component.

Use inputProps for supported attributes such as name, disabled, readOnly, required, maxLength, autoComplete, inputMode, and aria-*. The component also accepts standard React attributes for accessibility and application metadata.

Types and enums

InputTextViewSize controls how the field uses the available width.

Member	Description
`FULL`	Fills the available width. When the separate action is visible, the component leaves room for it.
`SHRINK_WHEN_EMPTY`	Fits the localized hint while empty, then expands to the available width after text is entered.

Behavior

System input

Activating the field opens the system input dialog on Meta Ray-Ban Display glasses. The system dialog owns the text-entry experience. When the dialog closes, focus returns to InputTextView and the component displays the current text.

Use onTextChange to observe changes. In controlled mode, pass the updated value back through text. In uncontrolled mode, the component keeps its own value, starting with defaultText.

Sizing and overflow

The field begins at one line and grows as text wraps until three lines are visible. Additional text scrolls within the field. Fading edges and a scrollbar show when more text is available.

Directional navigation scrolls overflowing text before moving to nearby content. When the beginning or end is reached, navigation continues through the surrounding interface.

Submission and loading

Providing onSend enables submission from the system input dialog and the optional action button. The visible action is disabled while the field is empty. Empty submission attempts do not call onSend.

After a successful submission, an uncontrolled field clears itself and reports the empty value through onTextChange. A controlled field changes only when the application updates text.

Set showLoader to show loading feedback within the field. The component uses loadingLabel as the accessible name for that state and respects reduced-motion preferences. Loading feedback does not submit text or replace the optional action.

The field and its optional action are separate focus targets while the action is enabled. Directional navigation moves between them and follows right-to-left layout direction.

A visible action is disabled while the field is empty or the input is disabled. A disabled action is skipped by focus order and by directional navigation, so focus continues to the next element in the interface. The action becomes a focus target again once the field has text.

After the system input dialog closes, focus returns to the field so users can continue through the interface.

Accessibility

hint provides the field’s accessible name by default. Pass a more specific, localized aria-label through inputProps when needed.
actionLabel names the optional action; its icon is decorative.
loadingLabel names the loading state.
The scrollbar and fading edges are visual only.
Pass states and relationships such as disabled, readOnly, required, and aria-describedby through inputProps.

Recommended patterns

Use controlled mode when validation, submission, or route state owns the text.
Use uncontrolled mode for a self-contained field that should clear after submission.
Pass localized hint, actionLabel, and loadingLabel values.
Use inputProps for supported validation and accessibility attributes.
Keep the field outside another material-owning component so its focus and loading states remain clear.

Avoid

Avoid adding another scrolling region around the field solely for its text. InputTextView already manages overflow after the third visible line.
Avoid styling the component’s text layout, scrollbar, or fading edges. Use the documented props and materials so sizing and focus behavior remain consistent.
When text should not be submitted, omit onSend and provide the next action elsewhere in the interface.

Button, Container, IndeterminateLoader, Materials, Typography