The NumberInput component has properties prefix and suffix. When present, the component uses an InputGroup (https://getbootstrap.com/docs/5.0/forms/input-group/) to display the text at the front and end of the input box, respectively. Unfortunately, combining the InputGroup with a floating label messes up the styling as seen in the screenshot below.
Most commonly, we will want to use a suffix to display the expected units.
The challenge is to fix the styling.
The NumberInput component has properties
prefixandsuffix. When present, the component uses an InputGroup (https://getbootstrap.com/docs/5.0/forms/input-group/) to display the text at the front and end of the input box, respectively. Unfortunately, combining the InputGroup with a floating label messes up the styling as seen in the screenshot below.Most commonly, we will want to use a suffix to display the expected units. The challenge is to fix the styling.