Develop

Input

Updated: Aug 29, 2026

Overview

Input components allow users to enter text using the system’s virtual keyboard or other input methods. The Meta VR UI Set SDK provides a labeled text field with validation and a single-line search bar. Both are stateless: hold the text in your own state, pass it in, and update it from the change callback.

Both take their height, icon size, padding, border, and colors from UiSetTheme, and both sit on an interaction target that meets the Android design requirements.

Text field (`TextField`)

Usage: Any labeled value in a form, such as a name, a room code, or a URL.
Content: A persistent label above the field, an optional placeholder for the empty state, and optional supportingText below it. leadingIcon and trailingIcon sit inside the field, and a trailingIcon replaces the default validation icon.
Behavior: singleLine is true by default. onSubmit runs on the keyboard done action. capitalization, keyboardType, and autoCorrectEnabled configure the software keyboard.

import metavrx.uiset.compose.input.TextField

var displayName by remember { mutableStateOf("") }

TextField(
    value = displayName,
    label = "Display name",
    onValueChange = { displayName = it },
    placeholder = "Visible to other people",
    supportingText = "Between 3 and 20 characters",
    onSubmit = { /* ... */ },
)

Validation

validation takes a function that maps the current text to a Flow<FieldValidationState>, which supports checks that run against a server. The states are Valid, Invalid, Validating, and Unspecified, and the field renders each one with its own colors and default trailing icon.

With autoValidate left at its default, the flow is collected on every value change. Set it to false to drive the state yourself, and use initialValidationState for the state shown before any result arrives.

import kotlinx.coroutines.flow.flow
import metavrx.uiset.compose.input.FieldValidationState

TextField(
    value = roomCode,
    label = "Room code",
    onValueChange = { roomCode = it },
    validation = { code ->
        flow {
            emit(FieldValidationState.Validating)
            emit(
                if (isRoomAvailable(code)) {
                    FieldValidationState.Valid
                } else {
                    FieldValidationState.Invalid
                }
            )
        }
    },
    supportingText = "Ask the host for the code",
)

Search bar (`SearchBar`)

Usage: Filtering a list or searching a catalog.
Content: A single-line query field with a clear action. Pass onAudioClick to add a microphone action, which stays available while the reader types.
Behavior: onSearch runs on the keyboard search action. onClear runs after onQueryChange empties the query.

import metavrx.uiset.compose.input.SearchBar

var query by remember { mutableStateOf("") }

SearchBar(
    query = query,
    onQueryChange = { query = it },
    onSearch = { /* ... */ },
    placeholder = "Search your library",
    onAudioClick = { /* ... */ },
)

Common parameters

placeholder: String?: Text shown while the field is empty.
enabled: Boolean = true: Controls interactivity of the field and its actions.
colors: InputColors: Container, content, focus, validation, placeholder, and disabled colors.
dimensions: InputDimensions: Height, icon size, padding, spacing, and border width.
shape: Shape: Field container shape.
modifier: Modifier = Modifier: Applied to the field group.

Label every field, keep supporting text to what the reader must do, and report a failed check through FieldValidationState.Invalid rather than a separate message.