Search code examples
androidkotlinandroid-jetpack-composeandroid-compose-textfield

How to add multiple Tags in Jetpack Compose


I want to achieve the same like adding tags in stackOverFlow question where we select the tags for the question how to do it in jetpack compose like this where on clicking the "x" icon should remove the tag Trying to achieve

I started with this way but confused where to start and how to achieve thinking of adding button with icon . can any guide me how to achieve it

my try but after Preview I am confused should i go with button with icon or basic textField ...

@Composable
fun MultipleTextFieldWithDeleteIcon(
  text: String,
  hint: String,
  modifier: Modifier = Modifier,
  isHintVisible: Boolean = true,
  onValueChange: (String) -> Unit,
  textStyle: TextStyle = TextStyle()
) {
  Box(
    modifier = modifier
  ) {
    BasicTextField(
        value = text,
        onValueChange = onValueChange,
        textStyle = textStyle,
        modifier = Modifier
            .align(Alignment.Center)
            .height(100.dp)
            .width(300.dp)

    )
    if(isHintVisible) {
        Text(text = hint, style = textStyle, color = Color.DarkGray)
    }
  }
}

@Preview
@Composable
 fun AboveTextFieldWithIconPreview() {
 MultipleTextFieldWithDeleteIcon(text = "android, androidJetpackCompose, jetpack",
    hint = "",
    onValueChange ={}
   )
 }

Solution

  • You can use the M3 InputChip.

    Something like:

    var selected by remember { mutableStateOf(false) }
    InputChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Input Chip") },
        trailingIcon = {
            Icon(
                Icons.Filled.Close,
                contentDescription = "Localized description",
                modifier = Modifier
                    .size(InputChipDefaults.IconSize)
                    .clickable {  }
    
            )
        }
    )
    

    enter image description here