InputGroup

Create an input group, which is a collection of related elements that decorate an Input.

You can declare addons, which appear to either the right or left of the input element outside its borders, and you can declare insets, which appear within the right or left of the input element's borders.

Addons look like tags that appear on the side of the input, and are useful places to add a bit of clarifying text, while insets are useful for icons or buttons that "float" within the input's borders.

An example of an input group looks like this:

var password by remember { mutableStateOf("") }
InputGroup {
  LeftAddon { Text("Password:") }
  TextInput(password, password = true, onTextChange = { password = it })
  RightInset {
    if (isValid(password)) {
      FaCheck(Modifier.color(Colors.Green))
    }
  }
}

Note that the InputGroup scope is NOT composable! So you must declare any remember blocks above it.