How to add multiple Tags in Jetpack Compose-CodePudding

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

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 ={}
   )
 }

CodePudding user response：

You can use the M3