How to add multiple Tags in Jetpack Compose

Question

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

Answer 1

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

        )
    }
)