Input

• Composable: SpatialTextField
• Usage: Usernames, passwords, messages, descriptions, generic text input.
• Key Parameters:
  • value: String: The current text content.
  • onValueChange: (String) -> Unit: Callback invoked when the text changes.
  • label: String: Text label displayed above the field.
  • modifier: Modifier
  • placeholder: String?: Hint text displayed inside the field when empty.
  • helperText: String?: Additional text displayed below the field (can indicate errors or provide guidance).
  • enabled: Boolean = true: Controls interactability.
  • leadingIcon: @Composable (() -> Unit)?: Optional icon before the text input area.
  • trailingIcon: @Composable (() -> Unit)?: Optional icon after the text input area (often used for validation status or clear buttons).
  • singleLine: Boolean = true: If true, restricts input to a single line and often shows a “Done” action on the keyboard. If false, allows multiple lines and may show a newline action.
  • validationPredicate: ((String) -> Flow<FieldValidationState>)?: Optional asynchronous validation logic.
  • initialState: FieldValidationState = FieldValidationState.Unspecified: Initial validation state.
  • autoValidate: Boolean = true: If true and validationPredicate is provided, validation runs automatically on value change.
  • keyboardOptions: Standard Compose KeyboardOptions (for example, keyboardType, imeAction, capitalization, autoCorrect).
  • keyboardActions: Standard Compose KeyboardActions (for example, onDone, onSend).
• Validation:
  • Uses FieldValidationState enum (Valid, Invalid, Validating, Unspecified).
  • If autoValidate is true, the border color and trailing icon can change based on the state emitted by the validationPredicate flow. Helper text color also adapts to Valid/Invalid states.

import com.meta.spatial.uiset.input.SpatialTextField
import com.meta.spatial.uiset.input.foundation.FieldValidationState
import androidx.compose.runtime.*
import kotlinx.coroutines.flow.flow

var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }

// Basic TextField
SpatialTextField(
    value = username,
    onValueChange = { username = it },
    label = "Username",
    placeholder = "Enter your username",
    singleLine = true
)

// TextField with async validation
SpatialTextField(
    value = password,
    onValueChange = { password = it },
    label = "Password",
    placeholder = "Enter password",
    singleLine = true,
    keyboardType = KeyboardType.Password,
    autoValidate = true,
    validationPredicate = { input ->
        flow {
            emit(FieldValidationState.Validating)
            if (input.length >= 8) emit(FieldValidationState.Valid)
            else emit(FieldValidationState.Invalid)
        }
    },
    helperText = "Password must be at least 8 characters"
)

// Multi-line TextField
SpatialTextField(
    value = remember { mutableStateOf("") }.value,
    onValueChange = { },
    label = "Description",
    placeholder = "Tell us about yourself...",
    singleLine = false,
    leadingIcon = { Icon(SpatialIcons.Regular.Info, null) }
)

• Composable: SpatialSearchBar
• Usage: Entering search terms.
• Key Parameters:
  • query: String: The current search text.
  • onQueryChange: (String) -> Unit: Callback when the text changes.
  • onQuerySubmit: (String) -> Unit: Callback when the search is submitted (for example, user presses “Done” on keyboard).
  • modifier: Modifier
  • placeholder: String = "Search": Default placeholder text.
  • enableAudio: Boolean = false: If true, shows a microphone icon that toggles for potential voice input (actual voice input mechanism not implemented in the component itself, only the toggle visual).
  • enabled: Boolean = true
  • keyboardOptions, keyboardActions: Similar to SpatialTextField, typically configured for ImeAction.Search or Done.

import com.meta.spatial.uiset.input.SpatialSearchBar
import androidx.compose.runtime.*

var searchQuery by remember { mutableStateOf("") }

SpatialSearchBar(
    query = searchQuery,
    onQueryChange = { searchQuery = it },
    onQuerySubmit = { submittedQuery ->
        // Trigger search logic
    },
    placeholder = "Search for apps..."
)