Request user input Collection

Make your app interactive by enabling users to enter text and other inputs. 

@Composable
fun ValidatingInputTextField(
    state: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    TextField(
        modifier = Modifier.fillMaxWidth(),
        value = state,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,,
        supportingText = {
            if (validatorHasErrors) {
                Text("Please enter a valid email")
            }
        }
    )
}
Validate input as the user types to reduce information errors and improve user engagement.
Guide 

@Composable
@Preview
fun PasswordTextField() {
  var password by rememberSaveable { mutableStateOf("") }
  var showPassword by remember { mutableStateOf(false) }
  val passwordVisualTransformation = remember { PasswordVisualTransformation() }


  TextField(
      value = password,
      onValueChange = { password = it },
      label = { Text("Enter password") },
      visualTransformation = if (showPassword) {
          VisualTransformation.None
      } else {
          passwordVisualTransformation
      },
      keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
      modifier = Modifier.fillMaxWidth(),
      trailingIcon = {
          Icon(
              painter = if (showPassword) {
                  painterResource(id = R.drawable.outline_visibility)
              } else {
                  painterResource(id = R.drawable.outline_visibility_off)
              },
              contentDescription = "Toggle password visibility",
              modifier = Modifier.clickable { showPassword = !showPassword })
      }
  )
}
Show or hide a password based on a user toggle to improve security and increase user trust.
Guide 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var phoneNumber by rememberSaveable { mutableStateOf("") }
                    val numericRegex = Regex("[^0-9]")
                    TextField(
                        value = phoneNumber,
                        onValueChange = {
                            val stripped = numericRegex.replace(it, "")
                            phoneNumber = if (stripped.length >= 10) {
                                stripped.substring(0..9)
                            } else {
                                stripped
                            }
                        },
                        label = { Text("Enter Phone Number") },
                        visualTransformation = NanpVisualTransformation(),
                        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
                    )
                }
            }
        }
    }
}

Auto-format a phone number in a text field

Auto-format a phone number in a text field to save users time.
Guide 

@Composable
fun DialogExamples() {
    // ...
    val openAlertDialog = remember { mutableStateOf(false) }

    // ...
        when {
            // ...
            openAlertDialog.value -> {
                AlertDialogExample(
                    onDismissRequest = { openAlertDialog.value = false },
                    onConfirmation = {
                        openAlertDialog.value = false
                        println("Confirmation registered") // Add logic here to handle confirmation.
                    },
                    dialogTitle = "Alert dialog example",
                    dialogText = "This is an example of an alert dialog with buttons.",
                    icon = Icons.Default.Info
                )
            }
        }
    }
}
Displays pop up messages or requests user input on a layer above the main app content. This component creates an interruptive UI experience to capture user attention.
Guide 

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Enables users to toggle between two states. Users can drag or click a switch's thumb to change the current state.
Guide 

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
Enables users to make selections from a range of values along a continuum, such as setting audio volume or filtering graph data across a range of prices.
Guide 

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
A compact, interactive UI element that represents complex entities such as a contact or tag, often with an icon and label. Chips can be checkable, dismissible, or clickable.
Guide 

@Composable
fun FilterTextView(modifier: Modifier = Modifier, viewModel: FilterTextViewModel = viewModel()) {
  val filteredItems by viewModel.filteredItems.collectAsStateWithLifecycle()
  var text by rememberSaveable { mutableStateOf("") }

  Column(
      modifier = Modifier
          .fillMaxSize()
          .padding(all = 10.dp)
  ) {
      OutlinedTextField(
          value = text,
          onValueChange = {
              text = it
              viewModel.filterText(text)
          },
          label = { Text("Filter Text") },
          modifier = Modifier.fillMaxWidth()
      )

      LazyColumn {
          items(
              count = filteredItems.size,
              key = { index -> filteredItems[index] }
          ) {
              ListItem(
                  headlineContent = { Text(filteredItems[it]) },
                  modifier = Modifier
                      .fillParentMaxWidth()
                      .padding(10.dp)
              )
          }
      }
  }
Filter through a list based on a user's text input.
Guide

Have questions or feedback

Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.
Go to FAQ Leave feedback