TextField or Edittext in Jetpack Compose for name , email , password hide/Unhide

•  Step 1 :-

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun InputDesign() {


    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        var text by remember { mutableStateOf("") }

        OutlinedTextField(
            value = text,
            onValueChange = { newText -> text = newText },
            singleLine = true,
            shape = RoundedCornerShape(12.dp),

            trailingIcon = {
                IconButton(onClick = {}) {
                    Icon(
                        imageVector = Icons.Filled.Visibility,
                        contentDescription = "This is eye button"
                    )
                }
            },
            leadingIcon = {
                IconButton(onClick = {}) {
                    Icon(imageVector = Icons.Default.Email, contentDescription = "Email")
                }
            },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Email,
                imeAction = ImeAction.Go
            ),

            label = { Text("Enter Name Here") }

        )


    }

}

• Step 2 :-   It also have edittext option like BasicTextField , TextField also if you need password
  
  
  

  var visibility by remember { mutableStateOf(false) }
  
  val icon = if (visibility) Icons.Filled.VisibilityOff else Icons.Filled.Visibility

  
  

  keyboardOptions = KeyboardOptions(
      keyboardType = KeyboardType.Password,
      imeAction = ImeAction.Go
  ),
  visualTransformation = if (visibility) VisualTransformation.None else PasswordVisualTransformation(),

  
  
• ScreenShot