diff --git a/.changeset/chatty-peas-switch.md b/.changeset/chatty-peas-switch.md
new file mode 100644
index 00000000000..82ea8b11bce
--- /dev/null
+++ b/.changeset/chatty-peas-switch.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added `status` prop to `Input`, `Textarea` and `Select`.
diff --git a/.changeset/clean-buttons-remember.md b/.changeset/clean-buttons-remember.md
new file mode 100644
index 00000000000..0732a47b0e3
--- /dev/null
+++ b/.changeset/clean-buttons-remember.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added `iui-input-group-wrapper` class to allow inline labels for input groups.
diff --git a/.changeset/cyan-jars-perform.md b/.changeset/cyan-jars-perform.md
new file mode 100644
index 00000000000..65d52812579
--- /dev/null
+++ b/.changeset/cyan-jars-perform.md
@@ -0,0 +1,9 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added two new components for building complex input layouts.
+ - `InputGrid` for the "outer" layout (label, inputs and statusMessage)
+ - `InputWithDecorations` for the "inner" layout (start icon/button, end icon/button)
+
+`LabeledInput`, `LabeledSelect`, `LabeledTextarea` and table `DatePickerInput` have been updated to make use of these new components internally.
diff --git a/.changeset/eighty-chefs-tan.md b/.changeset/eighty-chefs-tan.md
new file mode 100644
index 00000000000..d8f96b6a897
--- /dev/null
+++ b/.changeset/eighty-chefs-tan.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+`iui-transfer-list-listbox-label` and `iui-input-container` classes were removed.
diff --git a/.changeset/friendly-pigs-end.md b/.changeset/friendly-pigs-end.md
new file mode 100644
index 00000000000..8f4b9b08f42
--- /dev/null
+++ b/.changeset/friendly-pigs-end.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added `iui-input-grid` class for outer input styling.
diff --git a/.changeset/healthy-vans-behave.md b/.changeset/healthy-vans-behave.md
new file mode 100644
index 00000000000..608c200a98e
--- /dev/null
+++ b/.changeset/healthy-vans-behave.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `inputStyle` and `inputClassName` props from `LabeledInput`; style and className props are being passed down to input. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps`, `inputWrapperProps` to pass props to sub elements.
diff --git a/.changeset/hip-comics-switch.md b/.changeset/hip-comics-switch.md
new file mode 100644
index 00000000000..f8e463aef6a
--- /dev/null
+++ b/.changeset/hip-comics-switch.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added new `padded` prop to `Icon`.
diff --git a/.changeset/light-buses-swim.md b/.changeset/light-buses-swim.md
new file mode 100644
index 00000000000..573f2309ca3
--- /dev/null
+++ b/.changeset/light-buses-swim.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `selectStyle` and `selectClassName` props from `LabeledSelect`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.
diff --git a/.changeset/loud-pants-vanish.md b/.changeset/loud-pants-vanish.md
new file mode 100644
index 00000000000..364a340f7c2
--- /dev/null
+++ b/.changeset/loud-pants-vanish.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added status styling to `input` and `select`.
diff --git a/.changeset/nervous-kiwis-peel.md b/.changeset/nervous-kiwis-peel.md
new file mode 100644
index 00000000000..ab55f6a6382
--- /dev/null
+++ b/.changeset/nervous-kiwis-peel.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Removed `textareaStyle` and `textareaClassName` props from `LabeledTextarea`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.
diff --git a/.changeset/silly-buttons-run.md b/.changeset/silly-buttons-run.md
new file mode 100644
index 00000000000..7c9087e5069
--- /dev/null
+++ b/.changeset/silly-buttons-run.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added padded styling to Icon using `data-iui-padded` attribute.
diff --git a/.changeset/strong-parrots-pretend.md b/.changeset/strong-parrots-pretend.md
new file mode 100644
index 00000000000..b7099dd813c
--- /dev/null
+++ b/.changeset/strong-parrots-pretend.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added `iui-status-message` class to wrap StatusMessage icon and content. 
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ColorPicker.test.ts-With Alpha.png b/apps/storybook/cypress-visual-screenshots/baseline/ColorPicker.test.ts-With Alpha.png
index 8d5d09b1f1f..2e162209847 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ColorPicker.test.ts-With Alpha.png and b/apps/storybook/cypress-visual-screenshots/baseline/ColorPicker.test.ts-With Alpha.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Closed).png
index 16cacf3d249..9f603fdccc0 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Open).png
index 92660bfa304..6e8013dbb32 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Basic (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Closed).png
index b6757f15cc5..dbb070e8415 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Open).png
index 06a82667fdd..67cca8dc12f 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Controlled (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Closed).png
index 8751425a9a2..7aa5da25138 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Open).png
index 46b68fb0aa9..24556dd8b74 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Custom Renderer (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Closed).png
index c450918e4f9..9b14a13bef8 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Open).png
index 5bb1f17282f..b779c91b727 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Multiple Select (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Closed).png
index 16cacf3d249..9f603fdccc0 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Open).png
index 0ef49ee848b..2258a4162a7 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-Virtualized (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Closed).png
index 84752c8ea20..e83ea1b101d 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Open).png
index 92660bfa304..6e8013dbb32 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Custom Message Icon (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Closed).png
index a8f5e311798..cfe7d2052de 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Open).png
index 77d8dc5fe67..51d596244db 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Label (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Closed).png
index bb971634dee..39a003cd70e 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Open).png
index 92660bfa304..6e8013dbb32 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Message (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Closed).png
index 768f828c6bb..3de161b24dc 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Open).png
index 25efb263b94..4058a573e66 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/ComboBox.test.ts-With Status (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/DropdownMenu.test.ts-With Content (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/DropdownMenu.test.ts-With Content (Open).png
index 43ec5d2200b..07a8da8e829 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/DropdownMenu.test.ts-With Content (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/DropdownMenu.test.ts-With Content (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Basic.png
index 4d95cf6dd2b..84e20d8380f 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Basic.png and b/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Disabled.png b/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Disabled.png
index db8ea3f164e..6ee467d10b1 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Disabled.png and b/apps/storybook/cypress-visual-screenshots/baseline/Fieldset.test.ts-Disabled.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/FileUpload.test.ts-Wrapping Input.png b/apps/storybook/cypress-visual-screenshots/baseline/FileUpload.test.ts-Wrapping Input.png
index c98b0ebbeae..39c927a81d2 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/FileUpload.test.ts-Wrapping Input.png and b/apps/storybook/cypress-visual-screenshots/baseline/FileUpload.test.ts-Wrapping Input.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Icon.test.ts-Padded.png b/apps/storybook/cypress-visual-screenshots/baseline/Icon.test.ts-Padded.png
new file mode 100755
index 00000000000..807e8d79aff
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/Icon.test.ts-Padded.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png b/apps/storybook/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png
index f9a5d0044ec..619c7ff5b98 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png and b/apps/storybook/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Custom Actions.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Input.test.ts-Status.png b/apps/storybook/cypress-visual-screenshots/baseline/Input.test.ts-Status.png
new file mode 100755
index 00000000000..d9874c68e88
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/Input.test.ts-Status.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Input With Decorations.png b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Input With Decorations.png
new file mode 100755
index 00000000000..da5c7fb8c38
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Input With Decorations.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Input.png b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Input.png
new file mode 100755
index 00000000000..4b2debf4de4
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Input.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Search.png b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Search.png
new file mode 100755
index 00000000000..2b5d23fea7e
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Search.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Select.png b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Select.png
new file mode 100755
index 00000000000..c99168b4f53
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputGrid.test.ts-With Select.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Basic.png
new file mode 100755
index 00000000000..aa57f3910d6
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Disabled.png b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Disabled.png
new file mode 100755
index 00000000000..66d7ac31aec
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Disabled.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Small.png b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Small.png
new file mode 100755
index 00000000000..1b710b01552
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Small.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Status.png b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Status.png
new file mode 100755
index 00000000000..2a64f481273
Binary files /dev/null and b/apps/storybook/cypress-visual-screenshots/baseline/InputWithDecoration.test.ts-Status.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Label.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/Label.test.ts-Basic.png
index e77c7350f0f..6a1ed97d072 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Label.test.ts-Basic.png and b/apps/storybook/cypress-visual-screenshots/baseline/Label.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Basic.png
index c46240f216d..e695b6a24bc 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Basic.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Disabled.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Disabled.png
index 5af2bdc2f4e..8353a73b77f 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Disabled.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Disabled.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Hybrid Layout.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Hybrid Layout.png
index f8995ddb906..1fb0271287a 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Hybrid Layout.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Hybrid Layout.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Inline.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Inline.png
index 056020f7365..0740606912d 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Inline.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Inline.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Negative.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Negative.png
index ff13687f17d..a4234afd31c 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Negative.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Negative.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Positive.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Positive.png
index 6d8608e0df4..bb2c8af3643 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Positive.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Positive.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Warning.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Warning.png
index 55e85e02b36..fbfb63e6c40 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Warning.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-Warning.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Custom Icon.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Custom Icon.png
index c92dc04c35f..9d577f18886 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Custom Icon.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Custom Icon.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Message.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Message.png
index e2ab2ee563b..94835684e77 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Message.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledInput.test.ts-With Message.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Basic.png
index a629486b20b..7bd8706a3f3 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Basic.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Negative.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Negative.png
index e47e2362f1f..5d784b315d4 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Negative.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Negative.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Positive.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Positive.png
index 29655689dcd..8ad8711f173 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Positive.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Positive.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Warning.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Warning.png
index ced2eb76929..e01eed4b092 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Warning.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-Warning.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-With Custom Icon.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-With Custom Icon.png
index 2b1b6f118ad..87fae4fffc0 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-With Custom Icon.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledSelect.test.ts-With Custom Icon.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Basic.png
index ab08ae616a0..6bb3a36d220 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Basic.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Disabled.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Disabled.png
index e20b35a39dd..37278e54c5f 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Disabled.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Disabled.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Inline.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Inline.png
index d9ea1301256..be32dd48e2b 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Inline.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Inline.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Negative.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Negative.png
index a0f86eec79c..09b9acb60af 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Negative.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Negative.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Positive.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Positive.png
index c587eb2e0b4..42d6a03bad3 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Positive.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Positive.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Warning.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Warning.png
index bdda2ef3e5b..40868c442df 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Warning.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-Warning.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-With Custom Icon.png b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-With Custom Icon.png
index 50c0e54c79b..59b0823ba20 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-With Custom Icon.png and b/apps/storybook/cypress-visual-screenshots/baseline/LabeledTextarea.test.ts-With Custom Icon.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png
index a13b961bf66..5223c80c93d 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png
index e23b5c962b5..ed3fee3113b 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-Expandable With Custom Items (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png
index ede6a28d346..4be97c65c56 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/SearchBox.test.ts-With Custom Action (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Closed).png
index 52879325beb..b60a3ed0114 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Open).png
index e7d8fd174f4..35ddb7006e0 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Basic (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed With Value).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed With Value).png
index 30f3c2991d5..e855746ea0f 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed With Value).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed With Value).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed).png
index 52879325beb..b60a3ed0114 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Open).png
index a349a0c3316..d342ed0fb39 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Custom (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Closed).png
index 52879325beb..b60a3ed0114 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Open).png
index d18581e3792..46f2e1cd3b9 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Many Items (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Closed).png
index 52879325beb..b60a3ed0114 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Multi selected).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Multi selected).png
index 4a081d3f062..4920c65afcf 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Multi selected).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Multi selected).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Open).png
index d18581e3792..46f2e1cd3b9 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Closed).png
index 52879325beb..b60a3ed0114 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Multi selected).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Multi selected).png
index fa023dec552..6f315216123 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Multi selected).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Multi selected).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Open).png
index d18581e3792..46f2e1cd3b9 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Multi Custom Renderer (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Closed).png
index fc83c4cab5a..fd20edad3be 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Open).png
index 42de4ef28a2..2d4c112e76d 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Sublabels (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Closed).png
index c131b5fe679..dc8472b910d 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Open).png
index 0b45172c0d9..e083ca6bc94 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-Truncate Middle Text (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Closed).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Closed).png
index 4ffe2ea536c..1a19ccc4454 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Closed).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Closed).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Open).png
index 8dc49b398ef..fafb0769d90 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Icons (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Selected Value (Open).png b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Selected Value (Open).png
index 14f97de4fcd..656726f4e23 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Selected Value (Open).png and b/apps/storybook/cypress-visual-screenshots/baseline/Select.test.ts-With Selected Value (Open).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Filters.png b/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Filters.png
index ae08a6cf39a..47e46986d09 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Filters.png and b/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Filters.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Resizable Columns.png b/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Resizable Columns.png
index bb8ab101e63..a79b2fe6067 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Resizable Columns.png and b/apps/storybook/cypress-visual-screenshots/baseline/Table.test.ts-Resizable Columns.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Tile.test.ts-With Avatar.png b/apps/storybook/cypress-visual-screenshots/baseline/Tile.test.ts-With Avatar.png
index b0eb7495227..46382e2ede2 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Tile.test.ts-With Avatar.png and b/apps/storybook/cypress-visual-screenshots/baseline/Tile.test.ts-With Avatar.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Basic.png b/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Basic.png
index 0c368ad5fbc..b05ce9883e3 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Basic.png and b/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Basic.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Combined.png b/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Combined.png
index c24976b0656..3152d0194e7 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Combined.png and b/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Combined.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Custom Renderers.png b/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Custom Renderers.png
index 532281ef2ce..198f3cb259c 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Custom Renderers.png and b/apps/storybook/cypress-visual-screenshots/baseline/TimePicker.test.ts-Custom Renderers.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png b/apps/storybook/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png
old mode 100644
new mode 100755
index 21bee535cd3..71bf6c53c82
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png and b/apps/storybook/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png differ
diff --git a/apps/storybook/src/ComboBox.stories.tsx b/apps/storybook/src/ComboBox.stories.tsx
index 9c77b4928b7..e11fd6e82cb 100644
--- a/apps/storybook/src/ComboBox.stories.tsx
+++ b/apps/storybook/src/ComboBox.stories.tsx
@@ -12,6 +12,7 @@ import {
   StatusMessage,
   SelectOption,
   MenuItemSkeleton,
+  Flex,
 } from '@itwin/itwinui-react';
 import { SvgCamera } from '@itwin/itwinui-icons-react';
 
@@ -382,7 +383,7 @@ export const WithLabel: StoryFn<Partial<ComboBoxProps>> = (args) => {
   const options = React.useMemo(() => countriesList, []);
 
   return (
-    <>
+    <Flex flexDirection='column' alignItems='unset' gap='2xs'>
       <Label htmlFor='combo-input'>Country</Label>
       <ComboBox
         options={options}
@@ -393,7 +394,7 @@ export const WithLabel: StoryFn<Partial<ComboBoxProps>> = (args) => {
         }}
         {...args}
       />
-    </>
+    </Flex>
   );
 };
 WithLabel.args = {
diff --git a/apps/storybook/src/Icon.stories.tsx b/apps/storybook/src/Icon.stories.tsx
index 4ce8f82466e..e3b9b696f59 100644
--- a/apps/storybook/src/Icon.stories.tsx
+++ b/apps/storybook/src/Icon.stories.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import { Story, Meta } from '@storybook/react';
 import React from 'react';
-import { Icon, Slider } from '@itwin/itwinui-react';
+import { Icon, Slider, Flex } from '@itwin/itwinui-react';
 import {
   SvgInfoCircular,
   SvgPlaceholder,
@@ -42,6 +42,26 @@ Default.args = {
   fill: 'default',
 };
 
+export const Padded: Story<IconProps> = (args) => {
+  return (
+    <Flex
+      style={{
+        border: '1px solid red',
+        width: 'fit-content',
+      }}
+    >
+      <Icon {...args}>
+        <SvgPlaceholder />
+      </Icon>
+    </Flex>
+  );
+};
+Padded.args = {
+  size: 'medium',
+  fill: 'default',
+  padded: true,
+};
+
 export const Statuses: Story<IconProps> = (args) => {
   return (
     <>
diff --git a/apps/storybook/src/Icon.test.ts b/apps/storybook/src/Icon.test.ts
index 5a599ace2a3..4e8f3fd00e9 100644
--- a/apps/storybook/src/Icon.test.ts
+++ b/apps/storybook/src/Icon.test.ts
@@ -9,6 +9,7 @@ describe('Icon', () => {
     'Default',
     'Statuses',
     'Sizes',
+    'Padded',
     // 'Autoscale', // exclude Autoscale because it is only an interactive demo for the user
   ];
 
diff --git a/apps/storybook/src/Input.stories.tsx b/apps/storybook/src/Input.stories.tsx
index a1cb137f5b4..26473ada2f1 100644
--- a/apps/storybook/src/Input.stories.tsx
+++ b/apps/storybook/src/Input.stories.tsx
@@ -39,3 +39,12 @@ Small.args = {
   placeholder: 'Small Input',
   size: 'small',
 };
+
+export const Status: Story<InputProps> = (args) => {
+  return <Input placeholder='Positive Input' status='positive' {...args} />;
+};
+
+Status.args = {
+  placeholder: 'Positive Input',
+  status: 'positive',
+};
diff --git a/apps/storybook/src/Input.test.ts b/apps/storybook/src/Input.test.ts
index adc832e6956..361d29d638f 100644
--- a/apps/storybook/src/Input.test.ts
+++ b/apps/storybook/src/Input.test.ts
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 describe('Input', () => {
   const storyPath = 'Input/Input';
-  const tests = ['Basic', 'Disabled', 'Small'];
+  const tests = ['Basic', 'Disabled', 'Small', 'Status'];
 
   tests.forEach((testName) => {
     it(testName, function () {
diff --git a/apps/storybook/src/InputGrid.stories.tsx b/apps/storybook/src/InputGrid.stories.tsx
new file mode 100644
index 00000000000..0d1f117f250
--- /dev/null
+++ b/apps/storybook/src/InputGrid.stories.tsx
@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Story, Meta } from '@storybook/react';
+import React from 'react';
+import {
+  Input,
+  InputGrid,
+  InputWithDecorations,
+  Label,
+  Icon,
+  SearchBox,
+  Select,
+  StatusMessage,
+} from '@itwin/itwinui-react';
+import { SvgAdd, SvgAirplane } from '@itwin/itwinui-icons-react';
+
+type InputGridProps = React.ComponentProps<typeof InputGrid>;
+
+export default {
+  component: InputGrid,
+  title: 'Utilities/InputGrid',
+  argTypes: {},
+} as Meta<InputGridProps>;
+
+export const WithInput: Story<InputGridProps> = () => {
+  return (
+    <InputGrid>
+      <Label htmlFor='input-id'>This is label</Label>
+      <Input id='input-id' />
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
+
+export const WithInputWithDecorations: Story<InputGridProps> = () => {
+  return (
+    <InputGrid>
+      <Label htmlFor='input-id'>This is label</Label>
+      <InputWithDecorations>
+        <Icon padded>
+          <SvgAirplane />
+        </Icon>
+        <InputWithDecorations.Input
+          placeholder='Add destination...'
+          id='input-id'
+        />
+        <InputWithDecorations.Button label='Add new flight'>
+          <SvgAdd />
+        </InputWithDecorations.Button>
+      </InputWithDecorations>
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
+
+export const WithSelect: Story<InputGridProps> = () => {
+  const options = [
+    { value: 1, label: 'Bali' },
+    { value: 2, label: 'Hawaii' },
+    { value: 3, label: 'Madagascar' },
+  ];
+  const [value, setValue] = React.useState<number | undefined>(undefined);
+
+  return (
+    <InputGrid>
+      <Label htmlFor='input-id'>This is label</Label>
+      <Select
+        id='input-id'
+        options={options}
+        placeholder='Select destination'
+        value={value}
+        onChange={(value) => setValue(value)}
+      />
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
+
+export const WithSearch: Story<InputGridProps> = () => {
+  return (
+    <InputGrid labelPlacement='inline'>
+      <Label htmlFor='input-id'>This is label</Label>
+      <SearchBox inputProps={{ id: 'input-id' }} />
+      <StatusMessage>This is message</StatusMessage>
+    </InputGrid>
+  );
+};
diff --git a/apps/storybook/src/InputGrid.test.ts b/apps/storybook/src/InputGrid.test.ts
new file mode 100644
index 00000000000..6ccee8f5af8
--- /dev/null
+++ b/apps/storybook/src/InputGrid.test.ts
@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+describe('InputGrid', () => {
+  const storyPath = 'Utilities/InputGrid';
+
+  const tests = [
+    'With Input',
+    'With Input With Decorations',
+    'With Select',
+    'With Search',
+  ];
+
+  tests.forEach((testName) => {
+    it(testName, function () {
+      const id = Cypress.storyId(storyPath, testName);
+      cy.visit('iframe', { qs: { id } });
+      cy.compareSnapshot(testName);
+    });
+  });
+});
diff --git a/apps/storybook/src/InputWithDecoration.stories.tsx b/apps/storybook/src/InputWithDecoration.stories.tsx
new file mode 100644
index 00000000000..c1a7504f3de
--- /dev/null
+++ b/apps/storybook/src/InputWithDecoration.stories.tsx
@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
+import { SvgAdd, SvgAirplane } from '@itwin/itwinui-icons-react';
+
+type InputWithDecorationsProps = React.ComponentProps<
+  typeof InputWithDecorations
+>;
+
+export default {
+  title: 'Input/InputWithDecorations',
+  component: InputWithDecorations,
+} as Meta<InputWithDecorationsProps>;
+
+export const Basic: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations>
+      <Icon padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Input..' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
+
+export const Disabled: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations isDisabled>
+      <Icon padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Disabled input' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
+
+export const Small: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations size='small'>
+      <Icon size='s' padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Small input' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
+
+export const Status: Story<InputWithDecorationsProps> = () => {
+  return (
+    <InputWithDecorations status='positive'>
+      <Icon padded>
+        <SvgAirplane />
+      </Icon>
+      <InputWithDecorations.Input placeholder='Positive input' />
+      <InputWithDecorations.Button label='Custom button'>
+        <SvgAdd />
+      </InputWithDecorations.Button>
+    </InputWithDecorations>
+  );
+};
diff --git a/apps/storybook/src/InputWithDecoration.test.ts b/apps/storybook/src/InputWithDecoration.test.ts
new file mode 100644
index 00000000000..84b01541c61
--- /dev/null
+++ b/apps/storybook/src/InputWithDecoration.test.ts
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+describe('InputWithDecorations', () => {
+  const storyPath = 'Input/InputWithDecorations';
+  const tests = ['Basic', 'Disabled', 'Small', 'Status'];
+
+  tests.forEach((testName) => {
+    it(testName, function () {
+      const id = Cypress.storyId(storyPath, testName);
+      cy.visit('iframe', { qs: { id } });
+      cy.compareSnapshot(testName);
+    });
+  });
+});
diff --git a/apps/storybook/src/LabeledInput.stories.tsx b/apps/storybook/src/LabeledInput.stories.tsx
index c8666a81a63..62f8a0655a7 100644
--- a/apps/storybook/src/LabeledInput.stories.tsx
+++ b/apps/storybook/src/LabeledInput.stories.tsx
@@ -2,11 +2,11 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { SvgCloseSmall, SvgPlaceholder } from '@itwin/itwinui-icons-react';
+import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
 import SvgCamera from '@itwin/itwinui-icons-react/cjs/icons/Camera';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { LabeledInput, Tooltip, IconButton } from '@itwin/itwinui-react';
+import { LabeledInput, Tooltip } from '@itwin/itwinui-react';
 
 type LabeledInputProps = React.ComponentProps<typeof LabeledInput>;
 
@@ -174,25 +174,3 @@ HybridLayout.args = {
   iconDisplayStyle: 'inline',
   message: 'Block layout with inline icon',
 };
-
-export const HybridLayoutWithButton: Story<LabeledInputProps> = (args) => {
-  return (
-    <LabeledInput
-      placeholder='Enter text here...'
-      label='This is a label'
-      svgIcon={
-        <IconButton styleType='borderless'>
-          <SvgCloseSmall />
-        </IconButton>
-      }
-      message='Block layout with inline borderless button'
-      iconDisplayStyle='inline'
-      {...args}
-    />
-  );
-};
-
-HybridLayoutWithButton.args = {
-  message: 'Block layout with inline borderless button',
-  iconDisplayStyle: 'inline',
-};
diff --git a/apps/storybook/src/LabeledInput.test.ts b/apps/storybook/src/LabeledInput.test.ts
index 8c747aab2db..2d1099318c7 100644
--- a/apps/storybook/src/LabeledInput.test.ts
+++ b/apps/storybook/src/LabeledInput.test.ts
@@ -9,7 +9,6 @@ describe('LabeledInput', () => {
     'Disabled',
     'Inline',
     'Hybrid Layout',
-    'Hybrid Layout With Button',
     'Negative',
     'Positive',
     'Warning',
diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx
index c225c2e7438..e5636efa280 100644
--- a/apps/storybook/src/Table.stories.tsx
+++ b/apps/storybook/src/Table.stories.tsx
@@ -2663,11 +2663,7 @@ export const ResizableColumns: Story<Partial<TableProps>> = (args) => {
 
   return (
     <>
-      <InputGroup
-        label='Resize mode'
-        displayStyle='inline'
-        style={{ marginBottom: 12 }}
-      >
+      <InputGroup label='Resize mode' displayStyle='inline'>
         <Radio
           name='choice'
           value='fit'
diff --git a/examples/Input.button.tsx b/examples/Input.button.tsx
index 39cfc5e731c..0f2d0a1eb9e 100644
--- a/examples/Input.button.tsx
+++ b/examples/Input.button.tsx
@@ -3,22 +3,30 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { LabeledInput, IconButton } from '@itwin/itwinui-react';
+import {
+  LabeledInput,
+  IconButton,
+  InputGrid,
+  Label,
+  InputWithDecorations,
+} from '@itwin/itwinui-react';
 import { SvgCloseSmall } from '@itwin/itwinui-icons-react';
 
 export default () => {
   return (
     <>
-      <LabeledInput
-        label='Street'
-        defaultValue='1051 Faribault Road'
-        svgIcon={
-          <IconButton styleType='borderless' aria-label='Clear street input'>
+      <InputGrid>
+        <Label htmlFor='input-1'>Street</Label>
+        <InputWithDecorations>
+          <InputWithDecorations.Input
+            id='input-1'
+            defaultValue='1051 Faribault Road'
+          />
+          <InputWithDecorations.Button>
             <SvgCloseSmall />
-          </IconButton>
-        }
-        iconDisplayStyle='inline'
-      />
+          </InputWithDecorations.Button>
+        </InputWithDecorations>
+      </InputGrid>
     </>
   );
 };
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png
index 93010b8e77d..f18d8806755 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_dark_0_demo-combo-group_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png
index fefa2f38f9c..25a32f7d42a 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_dark_0_demo-combo-group_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png
index b09d4c182e7..e76a65fabe8 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_hc_light_0_demo-combo-group_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png
index f43a2850067..2a1c4986a78 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_button_Type_Input_Button_Combo_light_0_demo-combo-group_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png
index 1f0d0d4e2ec..2e80a10ca7a 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png
index 92a983a3046..c624ffa2ce6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png
index dd284085b84..c9d3147aba6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png
index 73d3ebb8001..9b5adc309d4 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_dark_0_demo-text_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_dark_0_demo-text_0_desktop.png
index 83091fa71b5..ff81d87f200 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_dark_0_demo-text_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_dark_0_demo-text_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_dark_0_demo-text_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_dark_0_demo-text_0_desktop.png
index b4ff5f4f9f0..237963ead58 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_dark_0_demo-text_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_dark_0_demo-text_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_light_0_demo-text_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_light_0_demo-text_0_desktop.png
index 91b13dc4853..38d40fee29b 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_light_0_demo-text_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_hc_light_0_demo-text_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_light_0_demo-text_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_light_0_demo-text_0_desktop.png
index 0c1ceed06c9..742db61fd0d 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_light_0_demo-text_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_column-filter_Type_Text_filter_light_0_demo-text_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png
index fd32beb0054..0539f422ae7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png
index 51f3f40d273..a168ac2d9a4 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png
index 9e17efc903f..d9f26025d40 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png
index e490ccb2128..71ea7d12aee 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_dark_0_demo-default_0_desktop.png
index 668a54d437b..81835d50983 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_dark_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_dark_0_demo-default_0_desktop.png
index c61f413aa5f..60d76df05ad 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_dark_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_light_0_demo-default_0_desktop.png
index ebc41823ff6..294c31d5dcb 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_light_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_hc_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_light_0_demo-default_0_desktop.png
index bc73d33fd91..b7ac755f7ad 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_light_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_State_hover__focus_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_dark_0_demo-default_0_desktop.png
index e6b94c18997..f58bec4027b 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_dark_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_dark_0_demo-default_0_desktop.png
index 8262d9cde74..009e7161694 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_dark_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_light_0_demo-default_0_desktop.png
index 35460ef371f..91af562e1f0 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_light_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_light_0_demo-default_0_desktop.png
index f3bb3bcc174..8ee684e64a9 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_light_0_demo-default_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_header_Type_Default_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_dark_0_demo-padded_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_dark_0_demo-padded_0_desktop.png
new file mode 100644
index 00000000000..99625f8d11e
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_dark_0_demo-padded_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_hc_dark_0_demo-padded_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_hc_dark_0_demo-padded_0_desktop.png
new file mode 100644
index 00000000000..3506f5149b2
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_hc_dark_0_demo-padded_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_hc_light_0_demo-padded_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_hc_light_0_demo-padded_0_desktop.png
new file mode 100644
index 00000000000..a5caf35993e
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_hc_light_0_demo-padded_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_light_0_demo-padded_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_light_0_demo-padded_0_desktop.png
new file mode 100644
index 00000000000..48aceb9511d
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Padded_light_0_demo-padded_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_dark_0_demo-status_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_dark_0_demo-status_0_desktop.png
index c3bead5eb4f..97031e0b612 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_dark_0_demo-status_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_dark_0_demo-status_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_dark_0_demo-status_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_dark_0_demo-status_0_desktop.png
index accd993a4ba..873e8b3943f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_dark_0_demo-status_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_dark_0_demo-status_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_light_0_demo-status_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_light_0_demo-status_0_desktop.png
index cac05c52dd7..6b3442170d7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_light_0_demo-status_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_hc_light_0_demo-status_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_light_0_demo-status_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_light_0_demo-status_0_desktop.png
index 30be823d03f..5c5f0238014 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_light_0_demo-status_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_icon_Status_colors_light_0_demo-status_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png
new file mode 100644
index 00000000000..779d0342219
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png
new file mode 100644
index 00000000000..6dfcc11b247
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_dark_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png
new file mode 100644
index 00000000000..03c0ff2b2c4
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_hc_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png
new file mode 100644
index 00000000000..5ee014fb332
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Default_light_0_demo-default_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png
new file mode 100644
index 00000000000..245a17e3f3d
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png
new file mode 100644
index 00000000000..4ebf0bb7d46
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png
new file mode 100644
index 00000000000..3fcc1a094e7
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png
new file mode 100644
index 00000000000..cac36573473
Binary files /dev/null and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input-grid_Type_Inline_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png
index 92f17780c58..2e3332ec8c0 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_dark_0_demo-hybrid_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png
index 3881a151332..927fa58cae0 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_dark_0_demo-hybrid_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png
index a2db6b38a0f..ad238888b45 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_hc_light_0_demo-hybrid_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png
index b68c8573364..a2cdd52f795 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Hybrid_light_0_demo-hybrid_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png
index 2ebefd2bac4..caaa71c6014 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png
index 92b7af45fef..635918b9709 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png
index a6fa6fb2171..d521fd1bf9e 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png
index d65bbfd3f61..fd96a158b7b 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Inline_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png
index e6df5e811b0..158ff1148c6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_dark_0_demo-search-box_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png
index e0305abff5b..e2ae95e94ba 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_dark_0_demo-search-box_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png
index 6e14e9e8504..42632a6881a 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_hc_light_0_demo-search-box_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png
index 0cf0d981fe2..250bafe7c3e 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_SearchBox_light_0_demo-search-box_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png
index 48742b95027..aa02bdc1873 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png
index 3007620b37d..e23ffaba548 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_dark_1_demo-no-label__n1_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png
index a246f461549..59a2bbc93d7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png
index ded8d5a2c61..d2e1320d695 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_dark_1_demo-no-label__n1_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png
index 38c6e598f60..5d9a1e92f25 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png
index 5906561dbc3..0015422e541 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_hc_light_1_demo-no-label__n1_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png
index 54ede1c3bd9..5d6ef6c67cd 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png
index 5f528dfb951..12e88e2616c 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_input_Type_Without_Label_light_1_demo-no-label__n1_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index 1b87981dfeb..6c0359826ea 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index a9908bf9d82..b4e43cd3977 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index 4835dbcef40..1c520b59bf8 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index c809b11bfae..051ce0e3330 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_dark_0_demo-inline_0_desktop.png
index 5f4887f82d8..9375b79350f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_dark_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_dark_0_demo-inline_0_desktop.png
index 3e2746b2ffc..825f9ea60af 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_dark_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_light_0_demo-inline_0_desktop.png
index 87867b29c6e..1ffafac189b 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_light_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_light_0_demo-inline_0_desktop.png
index 813b7b348ba..4f9f3b8c0fa 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_light_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_radio_inline_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_dark_0_demo-inline-combo_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_dark_0_demo-inline-combo_0_.png
index d75e807407f..35c47234ecb 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_dark_0_demo-inline-combo_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_dark_0_demo-inline-combo_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_dark_0_demo-inline-combo_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_dark_0_demo-inline-combo_0_.png
index bc755433a10..593d811fc2c 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_dark_0_demo-inline-combo_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_dark_0_demo-inline-combo_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_light_0_demo-inline-combo_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_light_0_demo-inline-combo_0_.png
index 5943b6640c7..c4e246dbbc6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_light_0_demo-inline-combo_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_hc_light_0_demo-inline-combo_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_light_0_demo-inline-combo_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_light_0_demo-inline-combo_0_.png
index 00331757bad..9b2648eef70 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_light_0_demo-inline-combo_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Inline_combo_light_0_demo-inline-combo_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_dark_0_demo-sizes_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_dark_0_demo-sizes_0_.png
index f9bbfb334e2..44deddc8458 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_dark_0_demo-sizes_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_dark_0_demo-sizes_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_dark_0_demo-sizes_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_dark_0_demo-sizes_0_.png
index be6cd4731eb..6fcc43c7297 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_dark_0_demo-sizes_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_dark_0_demo-sizes_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_light_0_demo-sizes_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_light_0_demo-sizes_0_.png
index ac8fafd15aa..0b578d548da 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_light_0_demo-sizes_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_light_0_demo-sizes_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_light_0_demo-sizes_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_light_0_demo-sizes_0_.png
index 4f896ed9891..d28e5cdd687 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_light_0_demo-sizes_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Sizes_light_0_demo-sizes_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_dark_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_dark_0_demo-default-singular_0_.png
index e20645e327a..6a300ba986d 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_dark_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_dark_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_dark_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_dark_0_demo-default-singular_0_.png
index b8423321c5d..df1b7afb86e 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_dark_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_dark_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_light_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_light_0_demo-default-singular_0_.png
index 9821813eca1..a4f53032079 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_light_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_hc_light_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_light_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_light_0_demo-default-singular_0_.png
index 597778e6826..7258a8b1609 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_light_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_focus_light_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_dark_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_dark_0_demo-default-singular_0_.png
index 23ba789d178..28156b08ce4 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_dark_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_dark_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_dark_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_dark_0_demo-default-singular_0_.png
index f97213d9bf3..79d774bbfcf 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_dark_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_dark_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_light_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_light_0_demo-default-singular_0_.png
index b0c7904e119..ba9d18fcba6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_light_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_hc_light_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_light_0_demo-default-singular_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_light_0_demo-default-singular_0_.png
index abef0e3f6bb..f5e6c1630f0 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_light_0_demo-default-singular_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_State_hover_light_0_demo-default-singular_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png
index 1532a84116b..59277a3423b 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_dark_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png
index 8aba1f8f019..67f1d30ad0f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_dark_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png
index 5dc6b58e79c..dcdb2d4e979 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_hc_light_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png
index 1ca46554afe..44aa302fb24 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Default_light_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_dark_0_demo-multi_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_dark_0_demo-multi_0_.png
index fe11f27b0b3..2b3a4ef5476 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_dark_0_demo-multi_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_dark_0_demo-multi_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_dark_0_demo-multi_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_dark_0_demo-multi_0_.png
index 7e7e59379ab..654f2498dad 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_dark_0_demo-multi_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_dark_0_demo-multi_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_light_0_demo-multi_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_light_0_demo-multi_0_.png
index ccd10381fb6..7125a390094 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_light_0_demo-multi_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_light_0_demo-multi_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_light_0_demo-multi_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_light_0_demo-multi_0_.png
index f736c59f329..e14323bc5d1 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_light_0_demo-multi_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_select_Type_Multi_light_0_demo-multi_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png
index d2c3cae957c..1aa3daf20e7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png
index aceb20e0a62..b0ecac5fa46 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_dark_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png
index 7d7a81152bc..90099b5fc6e 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_hc_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png
index 78573e67ace..66b5ae45da6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_textarea_inline_light_0_demo-inline_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_dark_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_dark_0_demo-default_0_.png
index 319ab2a51fe..22a723154b5 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_dark_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_dark_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_dark_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_dark_0_demo-default_0_.png
index 0b0de69ffbc..98040f07afb 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_dark_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_dark_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_light_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_light_0_demo-default_0_.png
index 061b291c4f6..ad87b5e7d48 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_light_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_hc_light_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_light_0_demo-default_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_light_0_demo-default_0_.png
index bc0a71d06b8..2bbdc159c9f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_light_0_demo-default_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_transfer-list_Type_default_light_0_demo-default_0_.png differ
diff --git a/packages/itwinui-css/backstop/scenarios/icon.js b/packages/itwinui-css/backstop/scenarios/icon.js
index 303fb1e5b0a..af4ea1448cb 100644
--- a/packages/itwinui-css/backstop/scenarios/icon.js
+++ b/packages/itwinui-css/backstop/scenarios/icon.js
@@ -8,6 +8,9 @@ module.exports = [
   scenario('Basic', {
     selectors: ['#demo-icons'],
   }),
+  scenario('Padded', {
+    selectors: ['#demo-padded'],
+  }),
   scenario('Status colors', {
     selectors: ['#demo-status'],
   }),
diff --git a/packages/itwinui-css/backstop/scenarios/input-grid.js b/packages/itwinui-css/backstop/scenarios/input-grid.js
new file mode 100644
index 00000000000..51cde3eb745
--- /dev/null
+++ b/packages/itwinui-css/backstop/scenarios/input-grid.js
@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const { scenario } = require('../scenarioHelper');
+
+module.exports = [
+  scenario('Type Default', {
+    selectors: ['#demo-default'],
+  }),
+  scenario('Type Inline', {
+    selectors: ['#demo-inline'],
+  }),
+];
diff --git a/packages/itwinui-css/backstop/tests/breadcrumbs.html b/packages/itwinui-css/backstop/tests/breadcrumbs.html
index 37521326708..567949c96d8 100644
--- a/packages/itwinui-css/backstop/tests/breadcrumbs.html
+++ b/packages/itwinui-css/backstop/tests/breadcrumbs.html
@@ -28,7 +28,7 @@
       @import url('@itwin/itwinui-variables') layer(variables);
       @import url("@itwin/itwinui-css/css/all.css") layer(itwinui);
       .iui-input { width: 507.52px; }
-      .iui-input-container { margin: 0; }
+      .iui-input-grid { margin: 0; }
 
       section[id^='demo'] {
         padding: 12px;
@@ -334,14 +334,14 @@ <h2>After clicking "you are here"</h2>
             aria-hidden="true"
           ></svg-caret-down-small>
         </button>
-        <label class="iui-input-container iui-inline-label iui-inline-icon">
+        <label class="iui-input-grid iui-inline-label iui-inline-icon">
           <input
             value="C:/Root/Lorem/Ipsum/Nested/Double nested folder with truncation/You are here/"
             class="iui-input"
             spellcheck="false"
           />
           <button
-            class="iui-button iui-input-icon"
+            class="iui-button"
             data-iui-variant="borderless"
             aria-label="Close"
           >
diff --git a/packages/itwinui-css/backstop/tests/button.html b/packages/itwinui-css/backstop/tests/button.html
index 264cb8fb1b9..92251df35e8 100644
--- a/packages/itwinui-css/backstop/tests/button.html
+++ b/packages/itwinui-css/backstop/tests/button.html
@@ -1980,9 +1980,11 @@ <h3>Input + button combo group</h3>
 
       <div class="iui-button-group">
         <div>
-          <div class="iui-input-container iui-disabled">
+          <div
+            class="iui-input-flex-container"
+            data-iui-disabled="true"
+          >
             <input
-              class="iui-input"
               value="https://itwin.github.io/iTwinUI"
               disabled
             />
@@ -2002,23 +2004,19 @@ <h3>Input + button combo group</h3>
 
       <div class="iui-button-group">
         <div>
-          <div class="iui-input-container iui-inline-icon">
-            <input
-              class="iui-input"
-              value="https://itwin.github.io/iTwinUI"
-            />
-            <span class="iui-input-icon">
-
-              <button
-                class="iui-button"
-                data-iui-variant="borderless"
-              >
-                <svg-close-small
-                  class="iui-button-icon"
-                  aria-hidden="true"
-                ></svg-close-small>
-              </button>
-            </span>
+          <div class="iui-input-flex-container">
+            <input value="https://itwin.github.io/iTwinUI" />
+
+            <button
+              class="iui-button"
+              data-iui-variant="borderless"
+            >
+              <svg-close-small
+                class="iui-button-icon"
+                aria-hidden="true"
+              ></svg-close-small>
+            </button>
+
           </div>
         </div>
         <div>
diff --git a/packages/itwinui-css/backstop/tests/checkbox.html b/packages/itwinui-css/backstop/tests/checkbox.html
index a2d34847841..6b7d7c84d48 100644
--- a/packages/itwinui-css/backstop/tests/checkbox.html
+++ b/packages/itwinui-css/backstop/tests/checkbox.html
@@ -47,8 +47,8 @@ <h1>Checkbox</h1>
 
     <h2>Default</h2>
     <section id="demo-default">
-      <div class="iui-input-container iui-with-message">
-        <div class="iui-label iui-required">Checkbox group label</div>
+      <div class="iui-input-grid iui-input-group-wrapper">
+        <div class="iui-input-label iui-required">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -83,11 +83,16 @@ <h2>Default</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Checkbox group label</div>
+      <div class="iui-input-grid iui-input-group-wrapper">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper iui-disabled">
             <input
@@ -124,11 +129,13 @@ <h2>Default</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-positive">
-        <div class="iui-label">Checkbox group label</div>
+      <div class="iui-input-grid iui-input-group-wrapper">
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -163,17 +170,22 @@ <h2>Default</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
-        <div class="iui-message">
-          Positive message.
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-success
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-success>
+          </div>
+          <div>Positive message.</div>
         </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-warning">
-        <div class="iui-label">Checkbox group label</div>
+      <div class="iui-input-grid iui-input-group-wrapper">
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -208,17 +220,22 @@ <h2>Default</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
-        <div class="iui-message">
-          Warning message.
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-warning
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-warning>
+          </div>
+          <div>Warning message.</div>
         </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-negative">
-        <div class="iui-label">Checkbox group label</div>
+      <div class="iui-input-grid iui-input-group-wrapper">
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -253,17 +270,22 @@ <h2>Default</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-        <div class="iui-message">
-          Negative message.
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-error
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-error>
+          </div>
+          <div>Negative message.</div>
         </div>
       </div>
 
-      <div class="iui-input-container iui-with-message">
-        <div class="iui-label">Checkbox group label</div>
+      <div class="iui-input-grid iui-input-group-wrapper">
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -318,7 +340,9 @@ <h2>Default</h2>
             </span>
           </label>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </div>
 
     </section>
@@ -327,8 +351,11 @@ <h2>Default</h2>
 
     <h2>Inline</h2>
     <section id="demo-inline">
-      <div class="iui-input-container iui-inline-label">
-        <div class="iui-label iui-required">Checkbox group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label iui-required">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -365,8 +392,14 @@ <h2>Inline</h2>
         </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-disabled">
-        <div class="iui-label">Checkbox group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper"
+        data-iui-label-placement="inline"
+      >
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper iui-disabled">
             <input
@@ -405,8 +438,11 @@ <h2>Inline</h2>
         </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-positive">
-        <div class="iui-label">Checkbox group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -441,14 +477,24 @@ <h2>Inline</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-success
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-success>
+          </div>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-warning">
-        <div class="iui-label">Checkbox group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -483,14 +529,24 @@ <h2>Inline</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-warning
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-warning>
+          </div>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-negative">
-        <div class="iui-label">Checkbox group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Checkbox group label</div>
         <div class="iui-input-group">
           <label class="iui-checkbox-wrapper">
             <input
@@ -525,11 +581,17 @@ <h2>Inline</h2>
             <span class="iui-checkbox-label">Option 4</span>
           </label>
         </div>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-      </div>
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-error
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-error>
+          </div>
+        </div>
     </section>
 
     <br />
diff --git a/packages/itwinui-css/backstop/tests/color-picker.html b/packages/itwinui-css/backstop/tests/color-picker.html
index f3be1e070a6..b6d8e36c1f1 100644
--- a/packages/itwinui-css/backstop/tests/color-picker.html
+++ b/packages/itwinui-css/backstop/tests/color-picker.html
@@ -266,7 +266,7 @@ <h2>Advanced</h2>
               ></svg-swap>
             </button>
             <div class="iui-color-input-fields">
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -276,7 +276,7 @@ <h2>Advanced</h2>
                   data-iui-size="small"
                 />
               </div>
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -286,7 +286,7 @@ <h2>Advanced</h2>
                   data-iui-size="small"
                 />
               </div>
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -296,7 +296,7 @@ <h2>Advanced</h2>
                   data-iui-size="small"
                 />
               </div>
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -419,7 +419,7 @@ <h2>Advanced</h2>
               ></svg-swap>
             </button>
             <div class="iui-color-input-fields">
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -429,7 +429,7 @@ <h2>Advanced</h2>
                   data-iui-size="small"
                 />
               </div>
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -439,7 +439,7 @@ <h2>Advanced</h2>
                   data-iui-size="small"
                 />
               </div>
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -449,7 +449,7 @@ <h2>Advanced</h2>
                   data-iui-size="small"
                 />
               </div>
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   type="number"
                   min="0"
@@ -556,7 +556,7 @@ <h2>Advanced</h2>
               ></svg-swap>
             </button>
             <div class="iui-color-input-fields">
-              <div class="iui-input-container">
+              <div class="iui-input-grid">
                 <input
                   value="#ffc335"
                   maxlength="7"
diff --git a/packages/itwinui-css/backstop/tests/column-filter.html b/packages/itwinui-css/backstop/tests/column-filter.html
index cb8cd3db098..fe3b3493cba 100644
--- a/packages/itwinui-css/backstop/tests/column-filter.html
+++ b/packages/itwinui-css/backstop/tests/column-filter.html
@@ -40,8 +40,8 @@ <h2 id="default">Text filter</h2>
 
     <section id="demo-text">
       <div class="iui-table-column-filter">
-        <label class="iui-input-container">
-          <div class="iui-label">Show items with value that</div>
+        <label class="iui-input-grid">
+          <div class="iui-input-label">Show items with value that</div>
           <div class="iui-input-with-icon">
             <div
               tabindex="0"
@@ -51,7 +51,7 @@ <h2 id="default">Text filter</h2>
               <span class="iui-content">Starts with</span>
             </div>
             <svg-caret-down-small
-              class="iui-end-icon iui-actionable"
+              class="iui-end-icon iui-svg-icon"
               aria-hidden="true"
             ></svg-caret-down-small>
           </div>
@@ -76,13 +76,13 @@ <h2 id="default">Text filter</h2>
     <h2>Date filter</h2>
     <section id="demo-date">
       <div class="iui-table-column-filter">
-        <label class="iui-input-container iui-inline-label iui-inline-icon">
-          <div class="iui-label">From</div>
-          <input
-            class="iui-input"
-            value="Feb 6, 2020"
-          />
-          <span class="iui-input-icon">
+        <label
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <div class="iui-input-label">From</div>
+          <div class="iui-input-flex-container">
+            <input value="Feb 6, 2020" />
             <button
               class="iui-button"
               data-iui-variant="borderless"
@@ -93,15 +93,16 @@ <h2>Date filter</h2>
                 aria-hidden="true"
               ></svg-calendar>
             </button>
-          </span>
+          </div>
         </label>
-        <label class="iui-input-container iui-inline-label iui-inline-icon">
-          <div class="iui-label">To</div>
-          <input
-            class="iui-input"
-            value="Feb 6, 2020"
-          />
-          <span class="iui-input-icon">
+        <label
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <div class="iui-input-label">To</div>
+          <div class="iui-input-flex-container">
+            <input value="Feb 6, 2020" />
+
             <button
               class="iui-button"
               data-iui-variant="borderless"
@@ -112,7 +113,7 @@ <h2>Date filter</h2>
                 aria-hidden="true"
               ></svg-calendar>
             </button>
-          </span>
+          </div>
         </label>
 
         <div class="iui-button-bar">
@@ -140,13 +141,14 @@ <h2>Date filter</h2>
       <br /><br />
 
       <div class="iui-table-column-filter">
-        <label class="iui-input-container iui-inline-label iui-inline-icon">
-          <div class="iui-label">From</div>
-          <input
-            class="iui-input"
-            value="Feb 6, 2020 9:00 AM"
-          />
-          <span class="iui-input-icon">
+        <label
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <div class="iui-input-label">From</div>
+          <div class="iui-input-flex-container">
+            <input value="Feb 6, 2020 9:00 AM" />
+
             <button
               class="iui-button"
               data-iui-variant="borderless"
@@ -157,15 +159,17 @@ <h2>Date filter</h2>
                 aria-hidden="true"
               ></svg-calendar>
             </button>
-          </span>
+
+          </div>
         </label>
-        <label class="iui-input-container iui-inline-label iui-inline-icon">
-          <div class="iui-label">To</div>
-          <input
-            class="iui-input"
-            value="Feb 6, 2020 12:00 PM"
-          />
-          <span class="iui-input-icon">
+        <label
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <div class="iui-input-label">To</div>
+          <div class="iui-input-flex-container">
+            <input value="Feb 6, 2020 12:00 PM" />
+
             <button
               class="iui-button"
               data-iui-variant="borderless"
@@ -176,7 +180,7 @@ <h2>Date filter</h2>
                 aria-hidden="true"
               ></svg-calendar>
             </button>
-          </span>
+          </div>
         </label>
 
         <div class="iui-button-bar">
diff --git a/packages/itwinui-css/backstop/tests/dialog.html b/packages/itwinui-css/backstop/tests/dialog.html
index 1458ad4e49e..01af7332890 100644
--- a/packages/itwinui-css/backstop/tests/dialog.html
+++ b/packages/itwinui-css/backstop/tests/dialog.html
@@ -50,8 +50,8 @@
     <h1>Dialog</h1>
     <hr />
 
-    <div class="iui-input-container iui-inline-label">
-      <div class="iui-label">Dialog Placement</div>
+    <div class="iui-input-grid iui-inline-label">
+      <div class="iui-input-label">Dialog Placement</div>
       <div class="iui-input-group">
         <label class="iui-radio-wrapper">
           <input
diff --git a/packages/itwinui-css/backstop/tests/fieldset.html b/packages/itwinui-css/backstop/tests/fieldset.html
index 63bb16e11e7..cec0416d9f7 100644
--- a/packages/itwinui-css/backstop/tests/fieldset.html
+++ b/packages/itwinui-css/backstop/tests/fieldset.html
@@ -23,7 +23,7 @@
       @import url("./assets/demo.css") layer(demo);
       @import url('@itwin/itwinui-variables') layer(variables);
       @import url("@itwin/itwinui-css/css/all.css") layer(itwinui);
-      .iui-input-container {
+      .iui-input-grid {
         margin-bottom: 12px;
       }
 
@@ -44,8 +44,11 @@ <h1>Fieldset</h1>
       <fieldset class="iui-fieldset">
         <legend>General settings</legend>
 
-        <label class="iui-input-container iui-inline-label">
-          <div class="iui-label">Resolution</div>
+        <div
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <label class="iui-input-label">Resolution</label>
           <div class="iui-input-with-icon">
             <div
               tabindex="0"
@@ -54,14 +57,17 @@ <h1>Fieldset</h1>
               <span class="iui-content">2560 x 1600</span>
             </div>
             <svg-caret-down-small
-              class="iui-end-icon iui-actionable"
+              class="iui-end-icon iui-svg-icon"
               aria-hidden="true"
             ></svg-caret-down-small>
           </div>
-        </label>
+        </div>
 
-        <div class="iui-input-container iui-inline-label">
-          <div class="iui-label">Color theme</div>
+        <div
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <div class="iui-input-label">Color theme</div>
           <div class="iui-input-group">
             <label class="iui-radio-wrapper">
               <input
@@ -134,8 +140,14 @@ <h1>Fieldset</h1>
       >
         <legend>Advanced settings</legend>
 
-        <label class="iui-input-container iui-inline-label iui-disabled">
-          <div class="iui-label">Internal URL</div>
+        <label
+          class="iui-input-grid"
+          data-iui-label-placement="inline"
+        >
+          <div
+            class="iui-input-label"
+            data-iui-disabled="true"
+          >Internal URL</div>
           <input
             value="http://127.0.0.1:5500/backstop/minified/fieldset.html"
             class="iui-input"
diff --git a/packages/itwinui-css/backstop/tests/file-upload.html b/packages/itwinui-css/backstop/tests/file-upload.html
index f6642bd171d..5b30e2efa2c 100644
--- a/packages/itwinui-css/backstop/tests/file-upload.html
+++ b/packages/itwinui-css/backstop/tests/file-upload.html
@@ -31,7 +31,7 @@
       @import url("@itwin/itwinui-css/css/all.css") layer(itwinui);
     </style>
     <style>
-      .iui-input-container,
+      .iui-input-grid,
       .iui-table,
       textarea,
       section {width: 960px !important;}
diff --git a/packages/itwinui-css/backstop/tests/header.html b/packages/itwinui-css/backstop/tests/header.html
index ce8b1a88141..ca1ba8858d6 100644
--- a/packages/itwinui-css/backstop/tests/header.html
+++ b/packages/itwinui-css/backstop/tests/header.html
@@ -39,9 +39,12 @@
       }
 
       .demo-searchbar {
+        background-color: var(--iui-color-background-backdrop);
         border-radius: 9999px;
         width: 20vw;
-        background-color: var(--iui-color-background-backdrop);
+      }
+      .demo-searchbar::before {
+        border-radius: 9999px;
       }
 
       .demo-searchbar-button {
@@ -176,13 +179,10 @@ <h2>Default</h2>
           </div>
 
           <div class="iui-page-header-center">
-            <label class="iui-input-container iui-inline-label iui-inline-icon">
-              <input
-                placeholder="Search within Version Gamma…"
-                class="iui-input demo-searchbar"
-              />
+            <label class="iui-input-flex-container demo-searchbar">
+              <input placeholder="Search within Version Gamma…" />
               <button
-                class="iui-button iui-input-icon demo-searchbar-button"
+                class="iui-button demo-searchbar-button"
                 data-iui-variant="borderless"
                 aria-label="Search"
               >
diff --git a/packages/itwinui-css/backstop/tests/icon.html b/packages/itwinui-css/backstop/tests/icon.html
index a3704834b68..4f306f2b4e3 100644
--- a/packages/itwinui-css/backstop/tests/icon.html
+++ b/packages/itwinui-css/backstop/tests/icon.html
@@ -84,6 +84,29 @@ <h2>Actionable icons</h2>
       </p>
     </section>
 
+    <h2>Icons with padding</h2>
+    <section id="demo-padded">
+      <svg-imodel-hollow
+        class="iui-svg-icon"
+        data-iui-icon-size="s"
+        data-iui-padded="true"
+        aria-hidden="true"
+      ></svg-imodel-hollow>
+      <svg-imodel-hollow
+        class="iui-svg-icon"
+        data-iui-icon-size="m"
+        data-iui-padded="true"
+        aria-hidden="true"
+      ></svg-imodel-hollow>
+      <svg-imodel-hollow
+        class="iui-svg-icon"
+        data-iui-icon-size="l"
+        data-iui-padded="true"
+        aria-hidden="true"
+      ></svg-imodel-hollow>
+    </section>
+
+
     <h2>Icons with status</h2>
     <section id="demo-status">
       <svg-info-circular
diff --git a/packages/itwinui-css/backstop/tests/information-panel.html b/packages/itwinui-css/backstop/tests/information-panel.html
index 6347fc66d67..9687fd139b1 100644
--- a/packages/itwinui-css/backstop/tests/information-panel.html
+++ b/packages/itwinui-css/backstop/tests/information-panel.html
@@ -115,7 +115,7 @@
       }
 
       /* Fixes display bug when using web components */
-      .iui-input-icon svg { display: flex; }
+      svg { display: flex; }
     </style>
   </head>
 
@@ -1295,7 +1295,7 @@ <h1>Information panel</h1>
               >
                 Musical genre
               </label>
-              <div class="iui-input-container iui-inline-icon">
+              <div class="iui-input-with-icon">
                 <input
                   class="iui-input"
                   data-iui-size="small"
@@ -1308,7 +1308,7 @@ <h1>Information panel</h1>
                   value="Dubstep"
                   aria-expanded="false"
                 >
-                <span class="iui-input-icon iui-actionable">
+                <span class="iui-svg-icon iui-end-icon">
                   <svg-caret-down-small aria-hidden="true"></svg-caret-down-small>
                 </span>
               </div>
diff --git a/packages/itwinui-css/backstop/tests/input-grid.html b/packages/itwinui-css/backstop/tests/input-grid.html
new file mode 100644
index 00000000000..df277b7f8aa
--- /dev/null
+++ b/packages/itwinui-css/backstop/tests/input-grid.html
@@ -0,0 +1,378 @@
+<!--
+  Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+  See LICENSE.md in the project root for license terms and full copyright notice.
+-->
+<!DOCTYPE html>
+<html
+  lang="en-US"
+  id="theme"
+>
+  <head>
+    <meta charset="UTF-8">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    >
+    <script type="module">
+      import "./assets/theme.js";
+      import "@itwin/itwinui-icons-elements/status-success";
+      import "@itwin/itwinui-icons-elements/status-warning";
+      import "@itwin/itwinui-icons-elements/status-error";
+      import "@itwin/itwinui-icons-elements/close-small";
+      import "@itwin/itwinui-icons-elements/info-circular";
+      import "@itwin/itwinui-icons-elements/chevron-up";
+      import "@itwin/itwinui-icons-elements/chevron-down";
+      import "@itwin/itwinui-icons-elements/search";
+    </script>
+    <title>Input grid | iTwinUI</title>
+    <style>
+      @import url("./assets/demo.css") layer(demo);
+      @import url('@itwin/itwinui-variables') layer(variables);
+      @import url("@itwin/itwinui-css/css/all.css") layer(itwinui);
+      section[id^='demo'] {
+        width: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      #block-labels > .iui-input-grid {
+        margin-bottom: 12px;
+      }
+
+      #inline-labels {
+        display: grid;
+        row-gap: 12px;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+      }
+
+      #inline-labels > .iui-input-label {
+        justify-self: end;
+      }
+    </style>
+  </head>
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
+    <theme-button></theme-button>
+    <h1>Input grid</h1>
+    <hr />
+
+    <h2>Default</h2>
+    <section id="demo-default">
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-01"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-01"
+          placeholder="Input..."
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-02"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-02"
+          placeholder="Input..."
+          value="With value"
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+          for="input-03"
+        >This is label</label>
+        <input
+          class="iui-input"
+          disabled
+          id="input-03"
+          placeholder="Disabled input..."
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+          for="input-04"
+        >This is label</label>
+        <input
+          class="iui-input"
+          disabled
+          id="input-04"
+          placeholder="Input..."
+          value="Disabled value"
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid ">
+        <label
+          class="iui-input-label iui-required"
+          for="input-05"
+        >This is label</label>
+        <input
+          class="iui-input"
+          required
+          id="input-05"
+          placeholder="Required input..."
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-06"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-06"
+          placeholder="Positive input..."
+          data-iui-status="positive"
+        />
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-07"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-07"
+          placeholder="Warning input..."
+          data-iui-status="warning"
+        />
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-08"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-08"
+          placeholder="Negative input..."
+          data-iui-status="negative"
+        />
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div>This is message</div>
+        </div>
+      </div>
+
+
+    </section>
+
+    <br />
+
+    <h2>Inline</h2>
+    <section id="demo-inline">
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-inline-01"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-inline-01"
+          placeholder="Input..."
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-inline-02"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-inline-02"
+          placeholder="Input..."
+          value="With value"
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+          for="input-inline-03"
+        >This is label</label>
+        <input
+          class="iui-input"
+          disabled
+          id="input-inline-03"
+          placeholder="Disabled input..."
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+          for="input-inline-04"
+        >This is label</label>
+        <input
+          class="iui-input"
+          disabled
+          id="input-inline-04"
+          placeholder="Input..."
+          value="Disabled value"
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label iui-required"
+          for="input-inline-05"
+        >This is label</label>
+        <input
+          class="iui-input"
+          required
+          id="input-inline-05"
+          placeholder="Required input..."
+        />
+        <div class="iui-status-message">
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-inline-06"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-inline-06"
+          placeholder="Positive input..."
+          data-iui-status="positive"
+        />
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-inline-07"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-inline-07"
+          placeholder="Warning input..."
+          data-iui-status="warning"
+        />
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div>This is message</div>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-inline-08"
+        >This is label</label>
+        <input
+          class="iui-input"
+          id="input-inline-08"
+          placeholder="Negative input..."
+          data-iui-status="negative"
+        />
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div>This is message</div>
+        </div>
+      </div>
+
+
+    </section>
+
+  </body>
+</html>
diff --git a/packages/itwinui-css/backstop/tests/input.html b/packages/itwinui-css/backstop/tests/input.html
index fa4dbeccdaf..060d25f9cfa 100644
--- a/packages/itwinui-css/backstop/tests/input.html
+++ b/packages/itwinui-css/backstop/tests/input.html
@@ -36,7 +36,7 @@
         gap: 12px;
       }
 
-      #block-labels > .iui-input-container {
+      #block-labels > .iui-input-grid {
         margin-bottom: 12px;
       }
 
@@ -62,107 +62,157 @@ <h1>Input</h1>
 
     <h2>Default</h2>
     <section id="demo-default">
-      <label
-        class="iui-input-container iui-with-message"
+      <div
+        class="iui-input-grid"
         id="demo-default-singular"
       >
-        <div class="iui-label iui-required">Input label</div>
+        <label class="iui-input-label iui-required">Input label
+        </label>
         <input
           placeholder="Placeholder…"
           class="iui-input"
           id="test-default-singular"
           required
         />
-        <div class="iui-message">Help message.</div>
-      </label>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
+      </div>
 
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">Input label</div>
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-10"
+        >Input label
+        </label>
         <input
+          id="input-10"
           value="A value"
           class="iui-input"
         />
-        <div class="iui-message">Help message.</div>
-      </label>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
+      </div>
 
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">Input label</div>
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-11"
+        >Input label
+        </label>
         <input
+          id="input-11"
           readonly
           value="A read-only value"
           class="iui-input"
         />
-        <div class="iui-message">Help message.</div>
-      </label>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
+      </div>
 
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Input label</div>
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Input label</label>
         <input
           disabled
           placeholder="Placeholder…"
           class="iui-input"
         />
-        <div class="iui-message">Help message.</div>
-      </label>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
+      </div>
 
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Input label</div>
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+          for="input-12"
+        >Input label</label>
         <input
+          id="input-12"
           disabled
           value="A value"
           class="iui-input"
         />
-        <div class="iui-message">Help message.</div>
-      </label>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
+      </div>
 
-      <label
-        class="iui-input-container iui-with-message iui-positive"
+      <div
+        class="iui-input-grid iui-positive"
         id="demo-status-singular"
       >
-        <div class="iui-label">Input label</div>
+        <label class="iui-input-label">Input label
+        </label>
         <input
           placeholder="Placeholder…"
           class="iui-input"
           id="test-status-singular"
+          data-iui-status="positive"
         />
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
-        <div class="iui-message">
-          Positive message.
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-success
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-success>
+          </div>
+          <div>Positive message.</div>
         </div>
-      </label>
+      </div>
 
-      <label class="iui-input-container iui-with-message iui-warning">
-        <div class="iui-label">Input label</div>
+      <div class="iui-input-grid iui-warning">
+        <label class="iui-input-label">Input label
+        </label>
         <input
           placeholder="Placeholder…"
           class="iui-input"
+          data-iui-status="warning"
         />
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
-        <div class="iui-message">
-          Warning message.
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-warning
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-warning>
+          </div>
+          <div>Warning message.</div>
         </div>
-      </label>
+      </div>
 
-      <label class="iui-input-container iui-with-message iui-negative">
-        <div class="iui-label">Input label</div>
+      <div class="iui-input-grid iui-negative">
+        <label class="iui-input-label">Input label
+        </label>
         <input
           placeholder="Placeholder…"
           class="iui-input"
+          data-iui-status="negative"
         />
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-        <div class="iui-message">
-          Negative message.
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-error
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-error>
+          </div>
+          <div>Negative message.</div>
         </div>
-      </label>
+      </div>
 
     </section>
 
@@ -170,84 +220,145 @@ <h2>Default</h2>
 
     <h2>Inline</h2>
     <section id="demo-inline">
-      <label class="iui-input-container iui-inline-label">
-        <div class="iui-label iui-required">Input label</div>
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label class="iui-input-label iui-required">Input label
+        </label>
         <input
           placeholder="Placeholder…"
           class="iui-input"
           required
         />
-      </label>
+      </div>
 
-      <label class="iui-input-container iui-inline-label">
-        <div class="iui-label">Input label</div>
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-1"
+        >Input label</label>
         <input
+          id="input-1"
           value="A value"
           class="iui-input"
         />
-      </label>
+      </div>
 
-      <label class="iui-input-container iui-inline-label iui-disabled">
-        <div class="iui-label">Input label</div>
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Input label</label>
         <input
           disabled
           placeholder="Placeholder…"
           class="iui-input"
         />
-      </label>
+      </div>
 
-      <label class="iui-input-container iui-inline-label iui-disabled">
-        <div class="iui-label">Input label</div>
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          data-iui-disabled="true"
+          for="input-13"
+        >Input label</label>
         <input
+          id="input-13"
           disabled
           value="A value"
           class="iui-input"
         />
-      </label>
+      </div>
+
+      <div
+        class="iui-input-grid iui-positive"
+        data-iui-label-placement="inline"
+      >
+        <label class="iui-input-label">Input label
+        </label>
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="positive"
+        >
+          <input placeholder="Placeholder…" />
+          <svg-status-success
+            class="iui-svg-icon"
+            data-iui-icon-color="positive"
+            data-iui-padded="true"
+            data-iui-icon-size="m"
+            aria-hidden="true"
+          ></svg-status-success>
+
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label class="iui-input-label">Input label
+        </label>
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="warning"
+        >
+          <input placeholder="Placeholder…" />
+          <svg-status-warning
+            class="iui-svg-icon"
+            data-iui-padded="true"
+            data-iui-icon-color="warning"
+            data-iui-icon-size="m"
+            aria-hidden="true"
+          ></svg-status-warning>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label class="iui-input-label">Input label
+        </label>
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="negative"
+        >
+          <input placeholder="Placeholder…" />
+          <svg-status-error
+            class="iui-svg-icon"
+            data-iui-padded="true"
+            data-iui-icon-color="negative"
+            data-iui-icon-size="m"
+            aria-hidden="true"
+          ></svg-status-error>
+        </div>
+      </div>
+
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label
+          class="iui-input-label"
+          for="input-14"
+        >Input label
+        </label>
+        <div class="iui-input-flex-container">
+          <input
+            id="input-14"
+            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          />
 
-      <label class="iui-input-container iui-inline-label iui-inline-icon iui-positive">
-        <div class="iui-label">Input label</div>
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
-      </label>
-
-      <label class="iui-input-container iui-inline-label iui-inline-icon iui-warning">
-        <div class="iui-label">Input label</div>
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
-      </label>
-
-      <label class="iui-input-container iui-inline-label iui-inline-icon iui-negative">
-        <div class="iui-label">Input label</div>
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-      </label>
-
-      <label class="iui-input-container iui-inline-label iui-inline-icon">
-        <div class="iui-label">Input label</div>
-        <input
-          value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-          class="iui-input"
-        />
-        <span class="iui-input-icon">
           <button
             class="iui-button"
             data-iui-variant="borderless"
@@ -258,72 +369,90 @@ <h2>Inline</h2>
               aria-hidden="true"
             ></svg-close-small>
           </button>
-        </span>
-      </label>
+
+        </div>
+      </div>
     </section>
 
     <br />
 
     <h2>Hybrid layouts</h2>
     <section id="demo-hybrid">
-      <label class="iui-input-container iui-with-message iui-inline-icon">
-        <div class="iui-label">Input label</div>
-        <input
-          value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-          class="iui-input"
-        />
-        <svg-info-circular
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-info-circular>
-        <div class="iui-message">
-          Block layout with inline icon.
+      <div class="iui-input-grid">
+        <label
+          class="iui-input-label"
+          for="input-15"
+        >Input label
+        </label>
+        <div class="iui-input-flex-container">
+          <input
+            id="input-15"
+            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          />
+          <svg-info-circular
+            class="iui-svg-icon"
+            data-iui-icon-size="m"
+            data-iui-padded="true"
+            aria-hidden="true"
+          ></svg-info-circular>
         </div>
-      </label>
+        <div class="iui-status-message">
+          <div>Block layout with inline icon.</div>
+        </div>
+      </div>
 
-      <label class="iui-input-container iui-with-message iui-inline-label iui-inline-icon">
-        <div class="iui-label">Input label</div>
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-info-circular
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-info-circular>
-        <div class="iui-message">
-          Inline label and icon with message below.
+      <div
+        class="iui-input-grid"
+        data-iui-label-placement="inline"
+      >
+        <label class="iui-input-label">Input label
+        </label>
+        <div class="iui-input-flex-container">
+          <input placeholder="Placeholder…" />
+          <svg-info-circular
+            class="iui-svg-icon"
+            data-iui-icon-size="m"
+            data-iui-padded="true"
+            aria-hidden="true"
+          ></svg-info-circular>
         </div>
-      </label>
+        <div class="iui-status-message">
+          <div>Inline label and icon with message below.</div>
+        </div>
+      </div>
 
-      <label class="iui-input-container iui-with-message iui-inline-label">
-        <div class="iui-label">Input label</div>
+      <div
+        class="iui-input-grid iui-inline-label"
+        data-iui-label-placement="inline"
+      >
+        <label class="iui-input-label">Input label
+        </label>
         <input
           placeholder="Placeholder…"
           class="iui-input"
         />
-        <svg-info-circular
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-info-circular>
-        <div class="iui-message">
-          Inline label with icon and message below.
+        <div class="iui-status-message">
+          <div class="iui-svg-icon"><svg-info-circular
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-info-circular></div>
+          <div>Inline label with icon and message below.</div>
         </div>
-      </label>
+      </div>
     </section>
 
     <br />
 
     <h2>Without label</h2>
     <section id="demo-no-label">
-      <div class="iui-input-container">
+      <div class="iui-input-grid">
         <input
           placeholder="Placeholder…"
           class="iui-input"
         />
       </div>
 
-      <div class="iui-input-container">
+      <div class="iui-input-grid">
         <input
           aria-label="Search"
           value="A value"
@@ -331,7 +460,7 @@ <h2>Without label</h2>
         />
       </div>
 
-      <div class="iui-input-container iui-disabled">
+      <div class="iui-input-grid">
         <input
           disabled
           placeholder="Placeholder…"
@@ -339,7 +468,7 @@ <h2>Without label</h2>
         />
       </div>
 
-      <div class="iui-input-container iui-disabled">
+      <div class="iui-input-grid">
         <input
           disabled
           aria-label="Search"
@@ -348,40 +477,55 @@ <h2>Without label</h2>
         />
       </div>
 
-      <div class="iui-input-container iui-inline-icon iui-positive">
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
+      <div class="iui-input-grid iui-positive">
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="positive"
+        >
+          <input placeholder="Placeholder…" />
+          <svg-status-success
+            class="iui-svg-icon"
+            data-iui-padded="true"
+            data-iui-icon-color="positive"
+            data-iui-icon-size="m"
+            aria-hidden="true"
+          ></svg-status-success>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-inline-icon iui-warning">
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
+      <div class="iui-input-grid iui-warning">
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="warning"
+        >
+          <input placeholder="Placeholder…" />
+          <svg-status-warning
+            class="iui-svg-icon"
+            data-iui-padded="true"
+            data-iui-icon-color="warning"
+            data-iui-icon-size="m"
+            aria-hidden="true"
+          ></svg-status-warning>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-inline-icon iui-negative">
-        <input
-          placeholder="Placeholder…"
-          class="iui-input"
-        />
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
+      <div class="iui-input-grid iui-negative">
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="negative"
+        >
+          <input placeholder="Placeholder…" />
+          <svg-status-error
+            class="iui-svg-icon"
+            data-iui-padded="true"
+            data-iui-icon-color="negative"
+            data-iui-icon-size="m"
+            aria-hidden="true"
+          ></svg-status-error>
+        </div>
       </div>
 
-      <div class="iui-input-container">
+      <div class="iui-input-grid">
         <input
           aria-label="Search"
           value="Small"
@@ -390,7 +534,7 @@ <h2>Without label</h2>
         />
       </div>
 
-      <div class="iui-input-container">
+      <div class="iui-input-grid">
         <input
           aria-label="Search"
           value="Default"
@@ -398,7 +542,7 @@ <h2>Without label</h2>
         />
       </div>
 
-      <div class="iui-input-container">
+      <div class="iui-input-grid">
         <input
           aria-label="Search"
           value="Large"
@@ -415,11 +559,12 @@ <h2>Auto-complete demo</h2>
       method="post"
       action=""
     >
-      <label
+      <div
         for="email"
-        class="iui-input-container"
+        class="iui-input-grid"
       >
-        <div class="iui-label">Email address</div>
+        <label class="iui-input-label">Email address
+        </label>
         <input
           placeholder="email@example.com"
           type="email"
@@ -428,7 +573,7 @@ <h2>Auto-complete demo</h2>
           autocomplete="on"
           class="iui-input"
         />
-      </label>
+      </div>
     </form>
 
     <br />
@@ -441,7 +586,7 @@ <h2>No wrapping label</h2>
           class="iui-input-label"
           for="test-1"
         >First name</label>
-        <div class="iui-input-container">
+        <div class="iui-input-grid">
           <input
             placeholder="Placeholder…"
             class="iui-input"
@@ -450,10 +595,11 @@ <h2>No wrapping label</h2>
         </div>
 
         <label
-          class="iui-input-label iui-disabled"
+          class="iui-input-label"
+          data-iui-disabled="true"
           for="test-2"
         >Middle name</label>
-        <div class="iui-input-container">
+        <div class="iui-input-grid">
           <input
             placeholder="Placeholder…"
             class="iui-input"
@@ -462,11 +608,11 @@ <h2>No wrapping label</h2>
           />
         </div>
 
-        <label
+        <div
           class="iui-input-label iui-required"
           for="test-3"
-        >Last name</label>
-        <div class="iui-input-container">
+        >Last name</div>
+        <div class="iui-input-grid">
           <input
             placeholder="Placeholder…"
             class="iui-input"
@@ -480,7 +626,7 @@ <h2>No wrapping label</h2>
           class="iui-input-label iui-inline"
           for="test-4"
         >First name</label>
-        <div class="iui-input-container">
+        <div class="iui-input-grid">
           <input
             placeholder="Placeholder…"
             class="iui-input"
@@ -489,10 +635,11 @@ <h2>No wrapping label</h2>
         </div>
 
         <label
-          class="iui-input-label iui-inline iui-disabled"
+          class="iui-input-label iui-inline"
+          data-iui-disabled="true"
           for="test-5"
         >Middle name</label>
-        <div class="iui-input-container">
+        <div class="iui-input-grid">
           <input
             placeholder="Placeholder…"
             class="iui-input"
@@ -505,7 +652,7 @@ <h2>No wrapping label</h2>
           class="iui-input-label iui-inline iui-required"
           for="test-6"
         >Last name</label>
-        <div class="iui-input-container">
+        <div class="iui-input-grid">
           <input
             placeholder="Placeholder…"
             class="iui-input"
diff --git a/packages/itwinui-css/backstop/tests/menu.html b/packages/itwinui-css/backstop/tests/menu.html
index 6081ced5fc3..14c87c4592c 100644
--- a/packages/itwinui-css/backstop/tests/menu.html
+++ b/packages/itwinui-css/backstop/tests/menu.html
@@ -446,7 +446,7 @@ <h2>Default</h2>
             class="iui-text-muted"
             style="margin-bottom: 8px;"
           >terry.rivers@email.com</div>
-          <label class="iui-input-container">
+          <label class="iui-input-grid">
             <div class="iui-input-with-icon">
               <div
                 tabindex="0"
@@ -455,7 +455,7 @@ <h2>Default</h2>
                 <span class="iui-list-item-content">Administrator</span>
               </div>
               <svg-caret-down-small
-                class="iui-end-icon iui-actionable"
+                class="iui-svg-icon iui-end-icon"
                 aria-hidden="true"
               ></svg-caret-down-small>
             </div>
@@ -990,8 +990,8 @@ <h3>Header</h3>
     <h3>Select</h3>
     <section id="demo-select">
 
-      <label class="iui-input-container">
-        <div class="iui-label">Small select label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">Small select label</div>
         <div class="iui-input-with-icon iui-small">
           <div
             tabindex="0"
@@ -1004,7 +1004,7 @@ <h3>Select</h3>
             <span class="iui-list-item-content">Alpha</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
@@ -1093,8 +1093,8 @@ <h3>Select</h3>
       </ul>
       <br />
 
-      <label class="iui-input-container">
-        <div class="iui-label">Default select label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">Default select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -1107,7 +1107,7 @@ <h3>Select</h3>
             <span class="iui-list-item-content">Alpha</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable iui-open"
+            class="iui-svg-icon iui-end-icon iui-open"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
@@ -1196,8 +1196,8 @@ <h3>Select</h3>
       </ul>
       <br />
 
-      <label class="iui-input-container">
-        <div class="iui-label">Large select label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">Large select label</div>
         <div class="iui-input-with-icon iui-large">
           <div
             tabindex="0"
@@ -1210,7 +1210,7 @@ <h3>Select</h3>
             <span class="iui-list-item-content">Alpha</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable iui-open"
+            class="iui-svg-icon iui-end-icon iui-open"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
diff --git a/packages/itwinui-css/backstop/tests/non-ideal-state.html b/packages/itwinui-css/backstop/tests/non-ideal-state.html
index ba552891082..5cb78f0bf14 100644
--- a/packages/itwinui-css/backstop/tests/non-ideal-state.html
+++ b/packages/itwinui-css/backstop/tests/non-ideal-state.html
@@ -2362,13 +2362,13 @@
           Select a destination below to be redirected.
         </div>
         <div class="iui-non-ideal-state-actions">
-          <label class="iui-input-container">
+          <label class="iui-input-flex-container">
             <div class="iui-input-with-icon">
               <div class="iui-select-button iui-placeholder">
                 Please choose…
               </div>
               <svg-caret-down-small
-                class="iui-end-icon iui-actionable"
+                class="iui-svg-icon iui-end-icon"
                 aria-hidden="true"
               ></svg-caret-down-small>
             </div>
diff --git a/packages/itwinui-css/backstop/tests/radio-tile.html b/packages/itwinui-css/backstop/tests/radio-tile.html
index b9880f6e5bb..876ae080e19 100644
--- a/packages/itwinui-css/backstop/tests/radio-tile.html
+++ b/packages/itwinui-css/backstop/tests/radio-tile.html
@@ -62,8 +62,8 @@ <h1>Radio tile</h1>
     <hr />
 
     <section id="demo-default">
-      <div class="iui-input-container demo-container-spacing">
-        <div class="iui-label iui-required">Radio tile label</div>
+      <div class="iui-input-grid demo-container-spacing">
+        <div class="iui-input-label iui-required">Radio tile label</div>
         <div class="iui-radio-tile-container">
           <label
             class="iui-radio-tile"
@@ -152,8 +152,8 @@ <h1>Radio tile</h1>
         </div>
       </div>
 
-      <div class="iui-input-container demo-container-spacing">
-        <div class="iui-label">Radio tile label</div>
+      <div class="iui-input-grid demo-container-spacing">
+        <div class="iui-input-label">Radio tile label</div>
         <div class="iui-radio-tile-container">
           <label class="iui-radio-tile">
             <input
@@ -226,8 +226,8 @@ <h1>Radio tile</h1>
         </div>
       </div>
 
-      <div class="iui-input-container demo-container-spacing">
-        <div class="iui-label">Map indicator type</div>
+      <div class="iui-input-grid demo-container-spacing">
+        <div class="iui-input-label">Map indicator type</div>
         <div class="iui-radio-tile-container">
           <label class="iui-radio-tile">
             <input
@@ -344,8 +344,8 @@ <h1>Radio tile</h1>
         </div>
       </div>
 
-      <div class="iui-input-container demo-container-spacing">
-        <div class="iui-label">Radio tile label</div>
+      <div class="iui-input-grid demo-container-spacing">
+        <div class="iui-input-label">Radio tile label</div>
         <div class="iui-radio-tile-container">
           <label
             class="iui-radio-tile"
@@ -442,8 +442,8 @@ <h1>Radio tile</h1>
         </div>
       </div>
 
-      <div class="iui-input-container demo-container-spacing">
-        <div class="iui-label">Map indicator type</div>
+      <div class="iui-input-grid demo-container-spacing">
+        <div class="iui-input-label">Map indicator type</div>
 
         <div class="iui-radio-tile-container">
           <label
@@ -576,10 +576,10 @@ <h1>Radio tile</h1>
 
     <section id="demo-alternative-layouts">
       <div
-        class="iui-input-container demo-container-spacing"
+        class="iui-input-grid demo-container-spacing"
         style="width: 300px;"
       >
-        <div class="iui-label">Radio tile vertical with tooltips</div>
+        <div class="iui-input-label">Radio tile vertical with tooltips</div>
         <div
           class="iui-radio-tile-container"
           id="radio-tile-with-tooltips"
@@ -667,10 +667,10 @@ <h1>Radio tile</h1>
       </div>
 
       <div
-        class="iui-input-container demo-container-spacing"
+        class="iui-input-grid demo-container-spacing"
         style="width: 400px;"
       >
-        <div class="iui-label">Radio tile label stacked</div>
+        <div class="iui-input-label">Radio tile label stacked</div>
         <div class="iui-radio-tile-container">
           <label class="iui-radio-tile">
             <input
@@ -751,10 +751,10 @@ <h1>Radio tile</h1>
       </div>
 
       <div
-        class="iui-input-container demo-container-spacing"
+        class="iui-input-grid demo-container-spacing"
         style="width: 75vw; max-width: 1000px; min-width: 400px"
       >
-        <div class="iui-label">Radio tile stacked - odd number</div>
+        <div class="iui-input-label">Radio tile stacked - odd number</div>
         <div class="iui-radio-tile-container">
           <label class="iui-radio-tile">
             <input
diff --git a/packages/itwinui-css/backstop/tests/radio.html b/packages/itwinui-css/backstop/tests/radio.html
index e8c19bf4f58..110ca8c236a 100644
--- a/packages/itwinui-css/backstop/tests/radio.html
+++ b/packages/itwinui-css/backstop/tests/radio.html
@@ -47,8 +47,8 @@ <h1>Radio</h1>
 
     <h2>Default</h2>
     <section id="demo-default">
-      <div class="iui-input-container iui-with-message">
-        <div class="iui-label iui-required">Radio group label</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label iui-required">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -90,11 +90,16 @@ <h2>Default</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Radio group label</div>
+      <div class="iui-input-grid iui-disabled">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper iui-disabled">
             <input
@@ -138,11 +143,13 @@ <h2>Default</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-positive">
-        <div class="iui-label">Radio group label</div>
+      <div class="iui-input-grid iui-positive">
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -184,17 +191,24 @@ <h2>Default</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
-        <div class="iui-message">
-          Positive message.
+
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div class="iui-svg-icon"><svg-status-success
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-success></div>
+          <div>
+            Positive message.
+          </div>
+
         </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-warning">
-        <div class="iui-label">Radio group label</div>
+      <div class="iui-input-grid iui-warning">
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -236,17 +250,23 @@ <h2>Default</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
-        <div class="iui-message">
-          Warning message.
+
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div class="iui-svg-icon"> <svg-status-warning
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-warning></div>
+          <div>
+            Warning message.</div>
+
         </div>
       </div>
 
-      <div class="iui-input-container iui-with-message iui-negative">
-        <div class="iui-label">Radio group label</div>
+      <div class="iui-input-grid iui-negative">
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -288,17 +308,24 @@ <h2>Default</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-        <div class="iui-message">
-          Negative message.
+
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div class="iui-svg-icon"> <svg-status-error
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-error></div>
+          <div>
+            Negative message.
+          </div>
+
         </div>
       </div>
 
-      <div class="iui-input-container iui-with-message">
-        <div class="iui-label">Radio group label</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -348,7 +375,9 @@ <h2>Default</h2>
             </span>
           </label>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </div>
     </section>
 
@@ -356,8 +385,11 @@ <h2>Default</h2>
 
     <h2>Inline</h2>
     <section id="demo-inline">
-      <div class="iui-input-container iui-inline-label">
-        <div class="iui-label iui-required">Radio group label</div>
+      <div
+        class="iui-input-grid iui-inline-label"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label iui-required">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -401,8 +433,14 @@ <h2>Inline</h2>
         </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-disabled">
-        <div class="iui-label">Radio group label</div>
+      <div
+        class="iui-input-grid iui-inline-label"
+        data-iui-label-placement="inline"
+      >
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper iui-disabled">
             <input
@@ -448,8 +486,11 @@ <h2>Inline</h2>
         </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-positive">
-        <div class="iui-label">Radio group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper iui-positive"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -491,14 +532,22 @@ <h2>Inline</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <svg-status-success
+            class="iui-svg-icon"
+            aria-hidden="true"
+          ></svg-status-success>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-warning">
-        <div class="iui-label">Radio group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper iui-warning"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -540,14 +589,22 @@ <h2>Inline</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <svg-status-warning
+            class="iui-svg-icon"
+            aria-hidden="true"
+          ></svg-status-warning>
+        </div>
       </div>
 
-      <div class="iui-input-container iui-inline-label iui-negative">
-        <div class="iui-label">Radio group label</div>
+      <div
+        class="iui-input-grid iui-input-group-wrapper iui-negative"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Radio group label</div>
         <div class="iui-input-group">
           <label class="iui-radio-wrapper">
             <input
@@ -589,10 +646,15 @@ <h2>Inline</h2>
             <span class="iui-radio-label">Option 4</span>
           </label>
         </div>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <svg-status-error
+            class="iui-svg-icon"
+            aria-hidden="true"
+          ></svg-status-error>
+        </div>
       </div>
     </section>
 
diff --git a/packages/itwinui-css/backstop/tests/select.html b/packages/itwinui-css/backstop/tests/select.html
index ddb6a934a71..3d7fd11e7be 100644
--- a/packages/itwinui-css/backstop/tests/select.html
+++ b/packages/itwinui-css/backstop/tests/select.html
@@ -67,10 +67,10 @@ <h2>Default</h2>
     <section id="demo-default">
 
       <label
-        class="iui-input-container iui-with-message"
+        class="iui-input-grid"
         id="demo-default-singular"
       >
-        <div class="iui-label iui-required">Select label</div>
+        <div class="iui-input-label iui-required">Select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -81,29 +81,33 @@ <h2>Default</h2>
 
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">ComboBox label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">ComboBox label</div>
         <div class="iui-input-with-icon">
           <input
             class="iui-input"
             placeholder="Placeholder…"
           />
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">ComboBox multiselect label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">ComboBox multiselect label</div>
         <div class="iui-input-with-icon">
           <input
             class="iui-input"
@@ -111,7 +115,7 @@ <h2>Default</h2>
             style="padding-left: min(414px, calc(70% + 20px))"
           />
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
           <div class="iui-select-tag-container">
@@ -130,10 +134,16 @@ <h2>Default</h2>
             <multi-select-tag value="+5 more"></multi-select-tag>
           </div>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Disabled ComboBox label</div>
+
+      <label class="iui-input-grid">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Disabled ComboBox label</div>
         <div class="iui-input-with-icon">
           <input
             class="iui-input iui-disabled"
@@ -145,11 +155,13 @@ <h2>Default</h2>
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -158,15 +170,17 @@ <h2>Default</h2>
             <span class="iui-content"></span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -183,15 +197,17 @@ <h2>Default</h2>
               qui officia deserunt mollit anim id est laborum.</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid iui-disabled">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div class="iui-select-button iui-disabled iui-placeholder">
             <span class="iui-content">Placeholder…</span>
@@ -201,11 +217,13 @@ <h2>Default</h2>
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid iui-disabled">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div class="iui-select-button iui-disabled">
             <span class="iui-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -219,11 +237,13 @@ <h2>Default</h2>
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-positive">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid iui-positive">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -232,21 +252,23 @@ <h2>Default</h2>
             <span class="iui-content">Placeholder…</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
-        <div class="iui-message">
-          Positive message.
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-success aria-hidden="true"></svg-status-success>
+          </div>
+          <div>Positive message.</div>
         </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-warning">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid iui-warning">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -255,21 +277,23 @@ <h2>Default</h2>
             <span class="iui-content">Placeholder…</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           ></svg-caret-down-small>
         </div>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
-        <div class="iui-message">
-          Warning message.
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-warning aria-hidden="true"></svg-status-warning>
+          </div>
+          <div>Warning message.</div>
         </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-negative">
-        <div class="iui-label">Select label</div>
+      <label class="iui-input-grid iui-negative">
+        <div class="iui-input-label">Select label</div>
         <div class="iui-input-with-icon">
           <div
             tabindex="0"
@@ -278,17 +302,22 @@ <h2>Default</h2>
             <span class="iui-content">Placeholder…</span>
           </div>
           <svg-caret-down-small
-            class="iui-end-icon iui-actionable"
+            class="iui-svg-icon iui-end-icon"
             aria-hidden="true"
           >
           </svg-caret-down-small>
         </div>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-        <div class="iui-message">
-          Negative message.
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-error
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-error>
+          </div>
+          <div>Negative message.</div>
         </div>
       </label>
 
@@ -307,7 +336,7 @@ <h2>Default</h2>
           <span class="iui-content">Small</span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -319,7 +348,7 @@ <h2>Default</h2>
         > <span class="iui-content">Default</span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -333,7 +362,7 @@ <h2>Default</h2>
           <span class="iui-content">Large</span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -360,7 +389,7 @@ <h2>In context</h2>
             qui officia deserunt mollit anim id est laborum.</span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -398,7 +427,7 @@ <h2>Multi select</h2>
           </span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -426,7 +455,7 @@ <h2>Multi select</h2>
           </span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -455,7 +484,7 @@ <h2>Multi select</h2>
           </span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
@@ -488,7 +517,7 @@ <h2>Multi select</h2>
           </span>
         </div>
         <svg-caret-down-small
-          class="iui-end-icon iui-actionable"
+          class="iui-svg-icon iui-end-icon"
           aria-hidden="true"
         ></svg-caret-down-small>
       </div>
diff --git a/packages/itwinui-css/backstop/tests/slider.html b/packages/itwinui-css/backstop/tests/slider.html
index 245bcb049e8..2540f3b5af2 100644
--- a/packages/itwinui-css/backstop/tests/slider.html
+++ b/packages/itwinui-css/backstop/tests/slider.html
@@ -63,10 +63,10 @@ <h1>Slider</h1>
 
     <h2>Default</h2>
     <section id="demo-default">
-      <div class="iui-input-container">
-        <div class="iui-label">Volume</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Volume</div>
 
-        <div class="iui-slider-component-container iui-slider-horizontal iui-input-group">
+        <div class="iui-slider-component-container iui-slider-horizontal">
           <span class="iui-slider-min">
             <svg-sound-mute
               class="iui-icon"
@@ -109,10 +109,10 @@ <h2>Default</h2>
 
       <br /><br />
 
-      <div class="iui-input-container">
-        <div class="iui-label">Slider with ticks</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Slider with ticks</div>
 
-        <div class="iui-slider-component-container iui-slider-horizontal iui-input-group">
+        <div class="iui-slider-component-container iui-slider-horizontal">
           <span class="iui-slider-min">0</span>
           <div class="iui-slider-container iui-progress-slider">
             <div class="iui-slider-rail"></div>
@@ -159,10 +159,13 @@ <h2>Default</h2>
 
       <br /><br />
 
-      <div class="iui-input-container iui-disabled">
-        <div class="iui-label">Disabled slider</div>
+      <div class="iui-input-grid">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Disabled slider</div>
 
-        <div class="iui-slider-component-container iui-slider-horizontal iui-input-group iui-disabled">
+        <div class="iui-slider-component-container iui-slider-horizontal iui-disabled">
           <span class="iui-slider-min">0</span>
           <div class="iui-slider-container iui-progress-slider">
             <div class="iui-slider-rail"></div>
@@ -211,10 +214,10 @@ <h2>Default</h2>
 
     <h2>Ranges</h2>
     <section id="demo-range">
-      <div class="iui-input-container">
-        <div class="iui-label">Price range</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Price range</div>
 
-        <div class="iui-slider-component-container iui-slider-horizontal iui-input-group">
+        <div class="iui-slider-component-container iui-slider-horizontal">
           <span class="iui-slider-min">0</span>
           <div class="
               iui-slider-container iui-range-slider">
@@ -265,10 +268,10 @@ <h2>Ranges</h2>
 
       <br /><br />
 
-      <div class="iui-input-container">
-        <div class="iui-label">Range with ticks</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Range with ticks</div>
 
-        <div class="iui-slider-component-container iui-slider-horizontal iui-input-group">
+        <div class="iui-slider-component-container iui-slider-horizontal">
           <span class="iui-slider-min">0</span>
           <div class="
             iui-slider-container iui-range-slider">
@@ -333,10 +336,13 @@ <h2>Ranges</h2>
 
       <br /><br />
 
-      <div class="iui-input-container iui-disabled">
-        <div class="iui-label">Disabled range</div>
+      <div class="iui-input-grid">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Disabled range</div>
 
-        <div class="iui-slider-component-container iui-slider-horizontal iui-input-group iui-disabled">
+        <div class="iui-slider-component-container iui-slider-horizontal iui-disabled">
           <span class="iui-slider-min">0</span>
           <div class="
             iui-slider-container iui-range-slider">
@@ -402,11 +408,11 @@ <h2>Ranges</h2>
 
     <h2>Default vertical</h2>
     <section id="demo-default-vertical">
-      <div class="iui-input-container">
-        <div class="iui-label">Volume</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Volume</div>
 
         <div
-          class="iui-slider-component-container iui-slider-vertical iui-input-group"
+          class="iui-slider-component-container iui-slider-vertical"
           style="height: 500px;"
         >
           <span class="iui-slider-min">
@@ -448,11 +454,11 @@ <h2>Default vertical</h2>
 
       <br /><br />
 
-      <div class="iui-input-container">
-        <div class="iui-label">Slider with ticks</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Slider with ticks</div>
 
         <div
-          class="iui-slider-component-container iui-slider-vertical iui-input-group"
+          class="iui-slider-component-container iui-slider-vertical"
           style="height: 500px;"
         >
           <span class="iui-slider-min">0</span>
@@ -494,11 +500,14 @@ <h2>Default vertical</h2>
 
       </div>
 
-      <div class="iui-input-container iui-disabled">
-        <div class="iui-label">Disabled slider</div>
+      <div class="iui-input-grid">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Disabled slider</div>
 
         <div
-          class="iui-slider-component-container iui-slider-vertical iui-input-group iui-disabled"
+          class="iui-slider-component-container iui-slider-vertical iui-disabled"
           style="height: 500px;"
         >
           <span class="iui-slider-min">0</span>
@@ -545,11 +554,11 @@ <h2>Default vertical</h2>
 
     <h2>Ranges Vertical</h2>
     <section id="demo-range-vertical">
-      <div class="iui-input-container ">
-        <div class="iui-label">Price range</div>
+      <div class="iui-input-grid ">
+        <div class="iui-input-label">Price range</div>
 
         <div
-          class="iui-slider-component-container iui-slider-vertical iui-input-group"
+          class="iui-slider-component-container iui-slider-vertical"
           style="height: 500px;"
         >
           <span class="iui-slider-min">0</span>
@@ -592,11 +601,11 @@ <h2>Ranges Vertical</h2>
 
       </div>
 
-      <div class="iui-input-container">
-        <div class="iui-label">Range with ticks</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Range with ticks</div>
 
         <div
-          class="iui-slider-component-container iui-slider-vertical iui-input-group"
+          class="iui-slider-component-container iui-slider-vertical"
           style="height: 500px;"
         >
           <span class="iui-slider-min">0</span>
@@ -654,11 +663,14 @@ <h2>Ranges Vertical</h2>
 
       </div>
 
-      <div class="iui-input-container iui-disabled">
-        <div class="iui-label">Disabled range</div>
+      <div class="iui-input-grid">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Disabled range</div>
 
         <div
-          class="iui-slider-component-container iui-slider-vertical iui-input-group iui-disabled"
+          class="iui-slider-component-container iui-slider-vertical iui-disabled"
           style="height: 500px;"
         >
           <span class="iui-slider-min">0</span>
diff --git a/packages/itwinui-css/backstop/tests/textarea.html b/packages/itwinui-css/backstop/tests/textarea.html
index f028c79ab61..2b04c893b38 100644
--- a/packages/itwinui-css/backstop/tests/textarea.html
+++ b/packages/itwinui-css/backstop/tests/textarea.html
@@ -43,10 +43,10 @@ <h1>Text area</h1>
     <h2>Default</h2>
     <section id="demo-default">
       <label
-        class="iui-input-container iui-with-message"
+        class="iui-input-grid iui-with-message"
         id="demo-default-singular"
       >
-        <div class="iui-label iui-required">Textarea label</div>
+        <div class="iui-input-label iui-required">Textarea label</div>
         <textarea
           placeholder="Placeholder…"
           class="iui-input"
@@ -54,11 +54,13 @@ <h2>Default</h2>
           id="test-default-singular"
           required
         ></textarea>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message">
-        <div class="iui-label">Textarea label</div>
+      <label class="iui-input-grid iui-with-message">
+        <div class="iui-input-label">Textarea label</div>
         <textarea
           class="iui-input"
           rows="3"
@@ -66,22 +68,32 @@ <h2>Default</h2>
         >
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </textarea>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Textarea label</div>
+      <label class="iui-input-grid iui-with-message iui-disabled">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Textarea label</div>
         <textarea
           disabled
           placeholder="Placeholder…"
           class="iui-input"
           rows="3"
         ></textarea>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-disabled">
-        <div class="iui-label">Textarea label</div>
+      <label class="iui-input-grid iui-with-message iui-disabled">
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Textarea label</div>
         <textarea
           disabled
           class="iui-input"
@@ -89,58 +101,78 @@ <h2>Default</h2>
         >
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </textarea>
-        <div class="iui-message">Help message.</div>
+        <div class="iui-status-message">
+          <div>Help message.</div>
+        </div>
       </label>
 
       <label
-        class="iui-input-container iui-with-message iui-positive"
+        class="iui-input-grid iui-with-message iui-positive"
         id="demo-status-singular"
       >
-        <div class="iui-label">Textarea label</div>
+        <div class="iui-input-label">Textarea label</div>
         <textarea
           placeholder="Placeholder…"
           class="iui-input"
           rows="3"
           id="test-status-singular"
+          data-iui-status="positive"
         ></textarea>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
-        <div class="iui-message">
-          Positive message.
+        <div
+          class="iui-status-message"
+          data-iui-status="positive"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-success
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-success>
+          </div>
+          <div>Positive message.</div>
         </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-warning">
-        <div class="iui-label">Textarea label</div>
+      <label class="iui-input-grid iui-with-message iui-warning">
+        <div class="iui-input-label">Textarea label</div>
         <textarea
           placeholder="Placeholder…"
           class="iui-input"
           rows="3"
+          data-iui-status="warning"
         ></textarea>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
-        <div class="iui-message">
-          Warning message.
+        <div
+          class="iui-status-message"
+          data-iui-status="warning"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-warning
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-warning>
+          </div>
+          <div>Warning message.</div>
         </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-negative">
-        <div class="iui-label">Textarea label</div>
+      <label class="iui-input-grid iui-with-message iui-negative">
+        <div class="iui-input-label">Textarea label</div>
         <textarea
           placeholder="Placeholder…"
           class="iui-input"
           rows="3"
+          data-iui-status="negative"
         ></textarea>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
-        <div class="iui-message">
-          Negative message.
+        <div
+          class="iui-status-message"
+          data-iui-status="negative"
+        >
+          <div class="iui-svg-icon">
+            <svg-status-error
+              class="iui-svg-icon"
+              aria-hidden="true"
+            ></svg-status-error>
+          </div>
+          <div>Negative message.</div>
         </div>
       </label>
     </section>
@@ -149,8 +181,11 @@ <h2>Default</h2>
 
     <h2>Inline</h2>
     <section id="demo-inline">
-      <label class="iui-input-container iui-with-message iui-inline-label">
-        <div class="iui-label iui-required">Textarea label</div>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label iui-required">Textarea label</div>
         <textarea
           placeholder="Placeholder…"
           class="iui-input"
@@ -159,8 +194,11 @@ <h2>Inline</h2>
         ></textarea>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-inline-label">
-        <div class="iui-label">Textarea label</div>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Textarea label</div>
         <textarea
           class="iui-input"
           rows="3"
@@ -170,8 +208,14 @@ <h2>Inline</h2>
         </textarea>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-inline-label iui-disabled">
-        <div class="iui-label">Textarea label</div>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label iui-disabled"
+        data-iui-label-placement="inline"
+      >
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Textarea label</div>
         <textarea
           disabled
           placeholder="Placeholder…"
@@ -180,8 +224,14 @@ <h2>Inline</h2>
         ></textarea>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-inline-label iui-disabled">
-        <div class="iui-label">Textarea label</div>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label iui-disabled"
+        data-iui-label-placement="inline"
+      >
+        <div
+          class="iui-input-label"
+          data-iui-disabled="true"
+        >Textarea label</div>
         <textarea
           disabled
           class="iui-input"
@@ -191,43 +241,67 @@ <h2>Inline</h2>
           </textarea>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-inline-label iui-inline-icon iui-positive">
-        <div class="iui-label">Textarea label</div>
-        <textarea
-          placeholder="Placeholder…"
-          class="iui-input"
-          rows="3"
-        ></textarea>
-        <svg-status-success
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-success>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label iui-inline-icon iui-positive"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Textarea label</div>
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="positive"
+        >
+          <textarea
+            placeholder="Placeholder…"
+            rows="3"
+          ></textarea>
+          <svg-status-success
+            class="iui-svg-icon iui-input-decorator-icon"
+            data-iui-icon-color="positive"
+            aria-hidden="true"
+          ></svg-status-success>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-inline-label iui-inline-icon iui-warning">
-        <div class="iui-label">Textarea label</div>
-        <textarea
-          placeholder="Placeholder…"
-          class="iui-input"
-          rows="3"
-        ></textarea>
-        <svg-status-warning
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-warning>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label iui-inline-icon iui-warning"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Textarea label</div>
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="warning"
+        >
+          <textarea
+            placeholder="Placeholder…"
+            rows="3"
+          ></textarea>
+          <svg-status-warning
+            class="iui-svg-icon iui-input-decorator-icon"
+            data-iui-icon-color="warning"
+            aria-hidden="true"
+          ></svg-status-warning>
+        </div>
       </label>
 
-      <label class="iui-input-container iui-with-message iui-inline-label iui-inline-icon iui-negative">
-        <div class="iui-label">Textarea label</div>
-        <textarea
-          placeholder="Placeholder…"
-          class="iui-input"
-          rows="3"
-        ></textarea>
-        <svg-status-error
-          class="iui-input-icon"
-          aria-hidden="true"
-        ></svg-status-error>
+      <label
+        class="iui-input-grid iui-with-message iui-inline-label iui-inline-icon iui-negative"
+        data-iui-label-placement="inline"
+      >
+        <div class="iui-input-label">Textarea label</div>
+        <div
+          class="iui-input-flex-container"
+          data-iui-status="negative"
+        >
+          <textarea
+            placeholder="Placeholder…"
+            rows="3"
+          ></textarea>
+          <svg-status-error
+            class="iui-svg-icon iui-input-decorator-icon"
+            data-iui-icon-color="negative"
+            aria-hidden="true"
+          ></svg-status-error>
+        </div>
       </label>
     </section>
   </body>
diff --git a/packages/itwinui-css/backstop/tests/toggle-switch.html b/packages/itwinui-css/backstop/tests/toggle-switch.html
index fc2e016cb60..4631ab77f3f 100644
--- a/packages/itwinui-css/backstop/tests/toggle-switch.html
+++ b/packages/itwinui-css/backstop/tests/toggle-switch.html
@@ -42,8 +42,8 @@ <h1>Toggle switch</h1>
 
     <h2>Default</h2>
     <section id="demo-default">
-      <div class="iui-input-container">
-        <div class="iui-label iui-required">Toggle switch group label</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label iui-required">Toggle switch group label</div>
         <div class="iui-input-group">
           <label class="iui-toggle-switch-wrapper iui-label-on-right">
             <input
@@ -84,8 +84,8 @@ <h2>Default</h2>
         </div>
       </div>
 
-      <div class="iui-input-container">
-        <div class="iui-label">Toggle switch group label</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label">Toggle switch group label</div>
         <div class="iui-input-group">
           <label class="iui-toggle-switch-wrapper iui-label-on-right">
             <input
@@ -147,8 +147,8 @@ <h2>Default</h2>
 
     <h2>Small</h2>
     <section id="demo-small">
-      <div class="iui-input-container">
-        <div class="iui-label iui-required">Toggle switch group label</div>
+      <div class="iui-input-grid">
+        <div class="iui-input-label iui-required">Toggle switch group label</div>
         <div class="iui-input-group">
           <label
             class="iui-toggle-switch-wrapper iui-label-on-right"
diff --git a/packages/itwinui-css/backstop/tests/transfer-list.html b/packages/itwinui-css/backstop/tests/transfer-list.html
index b54d4a03f4b..69366ccf739 100644
--- a/packages/itwinui-css/backstop/tests/transfer-list.html
+++ b/packages/itwinui-css/backstop/tests/transfer-list.html
@@ -47,7 +47,7 @@ <h1>TransferList</h1>
       <div class="iui-transfer-list-wrapper">
 
         <div class="iui-transfer-list-listbox-wrapper">
-          <div class="iui-transfer-list-listbox-label">Options</div>
+          <div class="iui-input-label">Options</div>
           <ul
             class="iui-list iui-transfer-list-listbox"
             role="listbox"
@@ -146,7 +146,7 @@ <h1>TransferList</h1>
         </div>
 
         <div class="iui-transfer-list-listbox-wrapper">
-          <div class="iui-transfer-list-listbox-label">Applied</div>
+          <div class="iui-input-label">Applied</div>
           <ul
             class="iui-list iui-transfer-list-listbox"
             role="listbox"
diff --git a/packages/itwinui-css/src/all.scss b/packages/itwinui-css/src/all.scss
index a11ba505406..0ffb11d8d7f 100644
--- a/packages/itwinui-css/src/all.scss
+++ b/packages/itwinui-css/src/all.scss
@@ -35,6 +35,7 @@
 @forward 'side-navigation/side-navigation';
 @forward 'skip-to-content/skip-to-content';
 @forward 'slider/slider';
+@forward 'status-message/status-message';
 @forward 'stepper/stepper';
 @forward 'surface/surface';
 @forward 'table/table';
diff --git a/packages/itwinui-css/src/button/button-group.scss b/packages/itwinui-css/src/button/button-group.scss
index b4079a35bed..38e6d29be01 100644
--- a/packages/itwinui-css/src/button/button-group.scss
+++ b/packages/itwinui-css/src/button/button-group.scss
@@ -15,8 +15,8 @@
     max-block-size: 100%;
   }
 
-  $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
-  $childBorderSelector: '.iui-input, .iui-button:where(:not([data-iui-variant="borderless"]))';
+  $childZindexSelector: '.iui-input-flex-container, .iui-button, .iui-input:where(:not(.iui-input-grid .iui-input))';
+  $childBorderSelector: '.iui-input-flex-container, .iui-input, .iui-button:where(:not([data-iui-variant="borderless"])), .iui-input-flex-container::before';
   $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
 
   > * {
diff --git a/packages/itwinui-css/src/information-panel/information-panel.scss b/packages/itwinui-css/src/information-panel/information-panel.scss
index 5c659a123d8..0837078d7d7 100644
--- a/packages/itwinui-css/src/information-panel/information-panel.scss
+++ b/packages/itwinui-css/src/information-panel/information-panel.scss
@@ -1,7 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../mixins';
-@use '../input-container/mixins' as input-container;
 
 @mixin iui-information-panel-vertical {
   inset-block-start: 0;
@@ -205,7 +204,7 @@
     align-items: center;
 
     .iui-input-label {
-      @include input-container.iui-input-label-inline;
+      margin-inline-end: var(--iui-size-m);
       // right align labels
       justify-self: end;
       text-align: end;
diff --git a/packages/itwinui-css/src/input-container/input-container.scss b/packages/itwinui-css/src/input-container/input-container.scss
index a762401b370..11d5629c8d3 100644
--- a/packages/itwinui-css/src/input-container/input-container.scss
+++ b/packages/itwinui-css/src/input-container/input-container.scss
@@ -1,41 +1,125 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use './mixins' as *;
+@use '../mixins' as *;
 
-.iui-input-container {
-  @include iui-input-container;
+.iui-input-grid {
+  display: grid;
+  row-gap: var(--iui-size-2xs);
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  align-items: center;
 
-  > .iui-label {
-    @include iui-input-container-label;
-  }
+  &[data-iui-label-placement='inline'] {
+    grid-template-rows: 1fr auto;
+    grid-template-columns: auto 1fr;
 
-  .iui-input-icon {
-    @include iui-input-icon;
-  }
+    .iui-input-label {
+      margin: 0 var(--iui-size-m) 0 0;
 
-  .iui-message {
-    @include iui-input-message;
-  }
+      &.iui-required {
+        margin-inline-end: calc(var(--iui-size-2xs) * 1.5 - 1px);
+      }
+    }
 
-  &.iui-inline-icon > .iui-input-icon {
-    @include iui-input-icon-inline;
+    .iui-input-group {
+      flex-direction: row;
+      gap: var(--iui-size-m);
+    }
   }
 
-  &.iui-inline-label {
-    > .iui-label {
-      @include iui-input-label-inline;
-    }
+  .iui-status-message {
+    grid-column-end: -1;
   }
 
   @each $status in positive, warning, negative {
-    &.iui-#{$status} {
-      @include iui-input-status($status: $status);
+    &[data-iui-status='#{$status}'] {
+      @include iui-text-selection($status);
+
+      .iui-input {
+        // #region Bottom padding to accomodate for status stripe
+        padding-block-end: calc(var(--iui-size-2xs) - 1px);
+
+        &[data-iui-size='small'] {
+          padding-block-end: 0;
+        }
+
+        &[data-iui-size='large'] {
+          padding-block-end: calc(var(--iui-size-xs) - 1px);
+        }
+        // #endregion
+
+        border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$status});
+
+        &:focus {
+          border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$status});
+          outline: 2px solid var(--iui-color-text-#{$status});
+          outline-offset: -2px;
+        }
+
+        &:hover {
+          --_iui-input-border-color: var(--iui-color-border-#{$status});
+        }
+      }
+
+      .iui-input-with-icon {
+        --_iui-input-with-icon-hover-border-color: var(--iui-color-border-#{$status});
+        --_iui-input-with-icon-focus-color: var(--iui-color-text-#{$status});
+      }
+
+      .iui-select-button {
+        border-block-end: transparent;
+
+        &::after {
+          content: '';
+          inline-size: 100%;
+          position: absolute;
+          inset-block-end: 0;
+          inset-inline-start: 0;
+          block-size: var(--iui-size-3xs);
+          background-color: var(--iui-color-border-#{$status});
+        }
+      }
     }
   }
 }
 
 .iui-input-label {
-  @include iui-input-label;
+  font-weight: var(--iui-font-weight-semibold);
+  color: var(--_iui-input-label-color);
+
+  &.iui-required {
+    &::after {
+      content: '*';
+      margin-inline-start: var(--iui-size-2xs);
+      color: var(--iui-color-text-negative);
+    }
+  }
+
+  &[data-iui-disabled='true'] {
+    --_iui-input-label-color: var(--iui-color-text-disabled);
+  }
+
+  cursor: default;
+
+  &:is(label) {
+    cursor: pointer;
+
+    &[data-iui-disabled='true'] {
+      cursor: not-allowed;
+    }
+  }
+  display: block;
+
+  &.iui-inline {
+    margin: 0 var(--iui-size-m) 0 0;
+
+    &.iui-required {
+      margin-inline-end: calc(var(--iui-size-2xs) * 1.5 - 1px);
+    }
+
+    display: inline-flex;
+    align-items: center;
+  }
 }
 
 // ----------------------------------------------------------------------------
@@ -57,6 +141,8 @@
   block-size: var(--_iui-input-min-height);
   inline-size: 100%;
   isolation: isolate;
+  min-block-size: var(--_iui-input-min-height);
+  block-size: fit-content;
 
   // Adding before pseudo-element to make inner elements more centered
   &::before {
@@ -72,7 +158,8 @@
     --_iui-input-border-color: var(--iui-color-border-foreground-hover);
   }
 
-  &:has(input:focus-visible) {
+  &:has(input:focus-visible),
+  &:has(textarea:focus-visible) {
     outline: 2px solid var(--_iui-input-accent-border-color);
     outline-offset: -2px;
 
@@ -94,12 +181,18 @@
     }
   }
 
-  input {
-    all: unset;
+  input,
+  textarea {
+    box-sizing: border-box;
+    background: transparent;
+    border: none;
+    font: inherit;
     z-index: 2;
     min-inline-size: var(--_iui-input-min-height);
+    min-block-size: var(--_iui-input-min-height);
     flex: 999;
-    padding-inline-start: var(--iui-size-s);
+    padding-inline: var(--iui-size-s);
+    padding-block: var(--_iui-input-padding-block);
 
     &:is(:not(:first-child)) {
       padding-inline-start: var(--iui-size-2xs);
@@ -110,6 +203,10 @@
       font-weight: var(--iui-font-weight-light);
       opacity: 1;
     }
+
+    &:focus {
+      outline: none;
+    }
   }
 
   &[data-iui-disabled='true'] {
@@ -145,3 +242,60 @@
     }
   }
 }
+
+.iui-input-group-wrapper {
+  &[data-iui-label-placement='inline'] {
+    display: flex;
+    flex-direction: row;
+
+    .iui-status-message {
+      margin-inline-start: var(--iui-size-m);
+    }
+  }
+}
+
+.iui-input-group {
+  display: flex;
+  flex-direction: column;
+
+  .iui-toggle-switch-wrapper {
+    padding: calc(var(--iui-size-s) * 0.5) 0;
+  }
+
+  .iui-radio-wrapper,
+  .iui-checkbox-wrapper {
+    min-block-size: var(--iui-size-l);
+  }
+}
+
+// attribute to include status border in inputs (input, select)
+.iui-input,
+.iui-input-with-icon > .iui-select-button {
+  @each $statusColor in informational, positive, warning, negative {
+    &:where([data-iui-status='#{$statusColor}']) {
+      padding-block-end: calc(var(--iui-size-2xs) - 1px);
+
+      &[data-iui-size='small'] {
+        padding-block-end: 0;
+      }
+
+      &[data-iui-size='large'] {
+        padding-block-end: calc(var(--iui-size-xs) - 1px);
+      }
+      // #endregion
+
+      border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$statusColor});
+
+      &:focus {
+        border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$statusColor});
+        outline: 2px solid var(--iui-color-text-#{$statusColor});
+        outline-offset: -2px;
+      }
+
+      &:hover {
+        --_iui-input-border-color: var(--iui-color-border-#{$statusColor});
+        --_iui-input-with-icon-hover-border-color: var(--iui-color-border-#{$statusColor});
+      }
+    }
+  }
+}
diff --git a/packages/itwinui-css/src/input-container/mixins.scss b/packages/itwinui-css/src/input-container/mixins.scss
deleted file mode 100644
index 40a242b93bc..00000000000
--- a/packages/itwinui-css/src/input-container/mixins.scss
+++ /dev/null
@@ -1,305 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../mixins';
-
-/// Container for grouping inputs with a label, an icon and a status message.
-/// Supported modifiers: .iui-inline-label, .iui-inline-icon and .iui-with-message
-@mixin iui-input-container {
-  @include mixins.iui-reset;
-  display: grid;
-  grid-template:
-    'label label'
-    'inputs inputs' / auto 1fr;
-
-  &.iui-inline-icon {
-    > .iui-input {
-      padding-inline-end: var(--iui-component-height);
-
-      &:last-child {
-        padding-inline-end: var(--iui-size-s);
-      }
-    }
-  }
-
-  &.iui-with-message {
-    grid-template:
-      'label label'
-      'inputs inputs'
-      'icon message' / auto 1fr;
-
-    // add margin to the icon if it is below input
-    &:not(.iui-inline-icon) > .iui-input-icon {
-      margin-block-start: var(--iui-size-2xs);
-    }
-  }
-
-  .iui-input,
-  .iui-input-with-icon,
-  .iui-input-group {
-    grid-area: inputs;
-  }
-
-  .iui-input-group .iui-toggle-switch-wrapper {
-    padding-block: calc(var(--iui-size-s) * 0.5);
-  }
-
-  // #region Cursors
-  @include iui-input-label-cursor;
-
-  &.iui-disabled {
-    --_iui-input-label-color: var(--iui-color-text-disabled);
-
-    label {
-      cursor: not-allowed;
-    }
-  }
-  // #endregion
-
-  // Appropriate spacing even if no text label is given
-  .iui-checkbox-wrapper,
-  .iui-radio-wrapper {
-    min-block-size: var(--iui-size-l);
-  }
-
-  &.iui-inline-label {
-    grid-template: 'label inputs icon' / auto 1fr auto;
-
-    &.iui-with-message {
-      grid-template:
-        'label inputs inputs'
-        '. icon message' / auto auto 1fr;
-    }
-
-    > .iui-input-group {
-      display: flex;
-      gap: var(--iui-size-m);
-
-      &:not(:last-child) {
-        margin-inline-end: var(--iui-size-m);
-      }
-    }
-  }
-}
-
-/// Cursor styling for the label.
-@mixin iui-input-label-cursor {
-  cursor: default;
-
-  &:is(label) {
-    cursor: pointer;
-
-    &.iui-disabled {
-      cursor: not-allowed;
-    }
-  }
-}
-
-/// Text label for an input.
-/// Supports .iui-required modifier to show red asterisk.
-@mixin iui-input-label-styling {
-  font-weight: var(--iui-font-weight-semibold);
-  margin-block-end: var(--iui-size-2xs);
-  color: var(--_iui-input-label-color);
-
-  &.iui-required {
-    &::after {
-      content: '*';
-      margin-inline-start: var(--iui-size-2xs);
-      color: var(--iui-color-text-negative);
-    }
-  }
-
-  &.iui-disabled {
-    --_iui-input-label-color: var(--iui-color-text-disabled);
-  }
-}
-
-/// Modifier on iui-input-label-styling to place it inline.
-@mixin iui-input-label-inline {
-  margin: 0;
-  margin-inline-end: var(--iui-size-m);
-
-  &.iui-required {
-    margin-inline-end: calc(var(--iui-size-2xs) * 1.5 - 1px);
-  }
-}
-
-/// Label inside the input-container grid.
-@mixin iui-input-container-label {
-  @include iui-input-label-styling;
-  grid-area: label;
-  align-self: center;
-  cursor: pointer;
-}
-
-/// Independent label outside the grid.
-/// Supports .iui-inline modifier to place it inline.
-@mixin iui-input-label {
-  @include iui-input-label-styling;
-  @include iui-input-label-cursor;
-  display: block;
-
-  &.iui-inline {
-    @include iui-input-label-inline;
-    display: inline-flex;
-    align-items: center;
-  }
-}
-
-/// Message shown below input
-@mixin iui-input-message {
-  font-size: var(--iui-font-size-0);
-  grid-area: message;
-  margin-block-start: var(--iui-size-2xs);
-  color: var(--iui-color-text-muted);
-
-  a {
-    user-select: none;
-  }
-}
-
-/// Icon to be shown near a message.
-@mixin iui-input-icon {
-  @include mixins.iui-icon-style('m');
-  grid-area: icon;
-  align-self: center;
-
-  &:not(:last-child) {
-    margin-inline-end: var(--iui-size-2xs);
-  }
-
-  svg:where(:not(.iui-button svg)) {
-    @include mixins.iui-icon-color;
-  }
-}
-
-/// Modifier on iui-input-icon to place it at the end of input.
-@mixin iui-input-icon-inline {
-  $margin-end: calc(var(--iui-size-xs) + 1px);
-
-  grid-area: inputs;
-  justify-self: end;
-  margin: 0;
-  margin-inline-end: $margin-end;
-  position: relative;
-  block-size: 100%;
-  inline-size: fit-content;
-  display: inline-flex;
-  align-items: center;
-
-  svg:where(:not(.iui-button svg)) {
-    @include mixins.iui-icon-style('m');
-  }
-
-  &,
-  .iui-button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    border-start-end-radius: inherit;
-    border-end-end-radius: inherit;
-  }
-
-  .iui-button {
-    margin-inline-end: calc(-1 * $margin-end);
-  }
-
-  &.iui-actionable {
-    align-items: center;
-    block-size: calc(100% - 4px); // subtract 2px on both sides to avoid overlapping with border/outline
-    margin-inline-end: 2px; // shift 2px from the right to avoid overlapping with border/outline
-    border-radius: var(--iui-border-radius-1);
-    padding-inline: calc(var(--iui-size-xs) + 1px);
-    cursor: pointer;
-    box-sizing: content-box;
-
-    @include mixins.iui-ripple(var(--iui-color-background), var(--iui-color-background-backdrop));
-
-    svg:where(:not(.iui-button svg)) {
-      fill: var(--iui-color-icon);
-      transition: transform var(--iui-duration-1) ease-out;
-    }
-
-    &.iui-open svg {
-      transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
-    }
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-
-    svg {
-      fill: var(--iui-color-icon-disabled);
-    }
-  }
-}
-
-/// Mixin for applying status colors to input container.
-/// @arg status - must be one of: positive, negative, warning
-/// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon svg
-/// @arg textSelector - selector to apply text color on. Defaults to .iui-message
-@mixin iui-input-status($status, $iconSelector: '.iui-input-icon svg', $textSelector: '.iui-message') {
-  @include mixins.iui-text-selection($status);
-
-  #{$iconSelector} {
-    fill: var(--iui-color-icon-#{$status});
-  }
-
-  #{$textSelector} {
-    color: var(--iui-color-text-#{$status});
-
-    a {
-      text-decoration: underline;
-      color: var(--iui-color-text-#{$status});
-
-      &:hover {
-        text-decoration: none;
-        color: var(--iui-color-text-#{$status}-hover);
-      }
-    }
-  }
-
-  .iui-input {
-    // #region Bottom padding to accomodate for status stripe
-    padding-block-end: calc(var(--iui-size-2xs) - 1px);
-
-    &[data-iui-size='small'] {
-      padding-block-end: 0;
-    }
-
-    &[data-iui-size='large'] {
-      padding-block-end: calc(var(--iui-size-xs) - 1px);
-    }
-    // #endregion
-
-    border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$status});
-
-    &:focus {
-      border-block-end: var(--iui-size-3xs) solid var(--iui-color-border-#{$status});
-      outline: 2px solid var(--iui-color-text-#{$status});
-      outline-offset: -2px;
-    }
-
-    &:hover {
-      --_iui-input-border-color: var(--iui-color-border-#{$status});
-    }
-  }
-
-  .iui-input-with-icon {
-    --_iui-input-with-icon-hover-border-color: var(--iui-color-border-#{$status});
-    --_focus-color: var(--iui-color-text-#{$status});
-  }
-
-  .iui-select-button {
-    border-block-end: transparent;
-
-    &::after {
-      content: '';
-      inline-size: 100%;
-      position: absolute;
-      inset-block-end: 0;
-      inset-inline-start: 0;
-      block-size: var(--iui-size-3xs);
-      background-color: var(--iui-color-border-#{$status});
-    }
-  }
-}
diff --git a/packages/itwinui-css/src/input/input-with-icon.scss b/packages/itwinui-css/src/input/input-with-icon.scss
deleted file mode 100644
index 33e1cf1cedf..00000000000
--- a/packages/itwinui-css/src/input/input-with-icon.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../mixins';
-@use '../input-container/mixins' as input-container;
-
-// Mixin to have inputs combined with icon (eg. select)
-@mixin iui-input-with-icon {
-  display: grid;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-
-  > :first-child {
-    grid-area: 1 / -1;
-    padding-inline-end: var(--iui-component-height); // Width of the end-icon button
-  }
-
-  &:focus-within {
-    > :first-child {
-      // --_focus-color can be used to control this from outside
-      outline: 2px solid var(--_focus-color, var(--iui-color-border-accent));
-      outline-offset: -2px;
-    }
-  }
-
-  &:hover {
-    > :first-child {
-      // --_iui-input-with-icon-hover-border-color can be used to control this from outside
-      border-color: var(--_iui-input-with-icon-hover-border-color, var(--iui-color-border-foreground-hover));
-    }
-  }
-
-  > .iui-select-tag-container {
-    max-inline-size: 70%;
-    inset-inline-end: unset;
-  }
-}
-
-@mixin iui-end-icon {
-  @include input-container.iui-input-icon-inline;
-  display: flex;
-  grid-area: 1 / -1;
-}
diff --git a/packages/itwinui-css/src/input/input.scss b/packages/itwinui-css/src/input/input.scss
index 7617f356576..7a69bd24c40 100644
--- a/packages/itwinui-css/src/input/input.scss
+++ b/packages/itwinui-css/src/input/input.scss
@@ -1,7 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../mixins';
-@use 'input-with-icon';
 
 @mixin iui-input {
   --_iui-input-background-color: var(--iui-color-background);
@@ -100,10 +99,56 @@
   }
 }
 
-.iui-input-with-icon.iui-input-with-icon {
-  @include input-with-icon.iui-input-with-icon;
+// Class to have inputs combined with icon (eg. select with arrow icon)
+.iui-input-with-icon {
+  display: grid;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  > :first-child {
+    grid-area: 1 / -1;
+    padding-inline-end: var(--iui-component-height); // Width of the end-icon button
+  }
+
+  &:focus-within {
+    > :first-child {
+      // --_iui-input-with-icon-focus-color can be used to control this from outside
+      outline: 2px solid var(--_iui-input-with-icon-focus-color, var(--iui-color-border-accent));
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover {
+    > :first-child {
+      // --_iui-input-with-icon-hover-border-color can be used to control this from outside
+      border-color: var(--_iui-input-with-icon-hover-border-color, var(--iui-color-border-foreground-hover));
+    }
+  }
+
+  > .iui-select-tag-container {
+    max-inline-size: 70%;
+    inset-inline-end: unset;
+  }
 }
 
 .iui-end-icon {
-  @include input-with-icon.iui-end-icon;
+  grid-area: 1 / -1;
+
+  justify-self: end;
+  margin-inline-end: calc(var(--iui-size-xs) + 1px);
+  position: relative; // Needed to show it on top of the input
+  pointer-events: none;
+
+  --_iui-svg-fill: var(--iui-color-icon);
+  transition: transform var(--iui-duration-1) ease-out;
+
+  &.iui-disabled {
+    cursor: not-allowed;
+    --_iui-svg-fill: var(--iui-color-icon-disabled);
+  }
+
+  &.iui-open {
+    transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
+  }
 }
diff --git a/packages/itwinui-css/src/non-ideal-state/non-ideal-state.scss b/packages/itwinui-css/src/non-ideal-state/non-ideal-state.scss
index ea42ec420ce..60b8fde82eb 100644
--- a/packages/itwinui-css/src/non-ideal-state/non-ideal-state.scss
+++ b/packages/itwinui-css/src/non-ideal-state/non-ideal-state.scss
@@ -39,7 +39,7 @@
   align-items: center;
   margin-block-end: var(--iui-size-xs);
 
-  > .iui-input-container {
+  > .iui-input-flex-container {
     display: inline-block;
     inline-size: 200px;
     text-align: start;
diff --git a/packages/itwinui-css/src/select/select.scss b/packages/itwinui-css/src/select/select.scss
index 77a0b91f3c7..97bf4d26575 100644
--- a/packages/itwinui-css/src/select/select.scss
+++ b/packages/itwinui-css/src/select/select.scss
@@ -7,6 +7,10 @@
 @use '../button/borderless';
 
 @mixin iui-select-button {
+  --_iui-input-background-color: var(--iui-color-background);
+  --_iui-input-border-color: var(--iui-color-border-foreground);
+  --_iui-input-text-color: var(--iui-color-text);
+
   @include mixins.iui-focus($offset: -2px, $thickness: 2px);
   inline-size: 100%;
   border-radius: var(--iui-border-radius-1);
@@ -20,15 +24,15 @@
   user-select: none;
   position: relative;
   overflow: hidden;
-  color: var(--iui-color-text);
-  background-color: var(--iui-color-background);
-  border: 1px solid var(--iui-color-border-foreground);
+  color: var(--_iui-input-text-color);
+  background-color: var(--_iui-input-background-color);
+  border: 1px solid var(--_iui-input-border-color);
   line-height: var(--iui-size-l);
   @include iui-select-size;
 
   &.iui-disabled {
-    background-color: var(--iui-color-background-disabled);
-    border-color: var(--iui-color-border-disabled);
+    --_iui-input-background-color: var(--iui-color-background-disabled);
+    --_iui-input-border-color: var(--iui-color-border-disabled);
     --_iui-input-with-icon-hover-border-color: var(--iui-color-border-disabled);
     cursor: not-allowed;
   }
diff --git a/packages/itwinui-css/src/status-message/status-message.scss b/packages/itwinui-css/src/status-message/status-message.scss
new file mode 100644
index 00000000000..f7e4357ccd5
--- /dev/null
+++ b/packages/itwinui-css/src/status-message/status-message.scss
@@ -0,0 +1,29 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@use '../mixins';
+
+.iui-status-message {
+  display: flex;
+  gap: var(--iui-size-2xs);
+  align-items: center;
+  font-size: var(--iui-font-size-0);
+  color: var(--iui-color-text-muted);
+
+  @each $status in positive, warning, negative {
+    &[data-iui-status='#{$status}'] {
+      color: var(--iui-color-text-#{$status});
+
+      a {
+        text-decoration: underline;
+        color: var(--iui-color-text-#{$status});
+      }
+
+      a:hover {
+        text-decoration: none;
+        color: var(--iui-color-text-#{$status}-hover);
+      }
+
+      --_iui-svg-fill: var(--iui-color-icon-#{$status});
+    }
+  }
+}
diff --git a/packages/itwinui-css/src/table/column-filter.scss b/packages/itwinui-css/src/table/column-filter.scss
index dc616c71957..e1f6d99531d 100644
--- a/packages/itwinui-css/src/table/column-filter.scss
+++ b/packages/itwinui-css/src/table/column-filter.scss
@@ -10,7 +10,7 @@
   align-items: flex-end;
   gap: var(--iui-size-s);
 
-  > .iui-input-container:not(.iui-inline-label) {
+  > .iui-input-grid:not([data-iui-label-placement='inline']) {
     inline-size: 100%;
   }
 
diff --git a/packages/itwinui-css/src/transfer-list/transfer-list.scss b/packages/itwinui-css/src/transfer-list/transfer-list.scss
index 27a8ab42b08..7e7b5317c6b 100644
--- a/packages/itwinui-css/src/transfer-list/transfer-list.scss
+++ b/packages/itwinui-css/src/transfer-list/transfer-list.scss
@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../input-container/mixins';
 @use '../surface/base' as surface;
 
 .iui-transfer-list-wrapper {
@@ -10,10 +9,6 @@
   column-gap: var(--iui-size-xs);
 }
 
-.iui-transfer-list-listbox-label {
-  @include mixins.iui-input-label-styling;
-}
-
 .iui-transfer-list-listbox-wrapper {
   display: flex;
   flex-direction: column;
diff --git a/packages/itwinui-css/src/utils/icon.scss b/packages/itwinui-css/src/utils/icon.scss
index 876300833dd..14fd4d4d737 100644
--- a/packages/itwinui-css/src/utils/icon.scss
+++ b/packages/itwinui-css/src/utils/icon.scss
@@ -27,6 +27,7 @@ $default-fill: var(--iui-color-icon-muted);
   @each $size in 's', 'm', 'l', 'auto' {
     &[data-iui-icon-size='#{$size}'] {
       --_iui-svg-size: #{map.get($icon-sizes, $size)};
+      --_iui-svg-margin-inline: calc(#{map.get($icon-sizes, $size)});
     }
   }
 
@@ -42,4 +43,8 @@ $default-fill: var(--iui-color-icon-muted);
       --_iui-svg-fill: CanvasText;
     }
   }
+
+  &[data-iui-padded='true'] {
+    margin-inline: var(--_iui-svg-margin-inline, --iui-size-s);
+  }
 }
diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.test.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.test.tsx
index c1a2ac81b40..a253bffa5a3 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.test.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.test.tsx
@@ -27,7 +27,7 @@ it('should render ColorInputPanel with input fields', async () => {
 
   expect(container.querySelector('.iui-color-input')).toBeTruthy();
   expect(container.querySelector('.iui-color-input-fields')).toBeTruthy();
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(1);
+  expect(container.querySelectorAll('.iui-input').length).toBe(1);
 
   const swapButton = container.querySelector(
     '.iui-button[data-iui-variant="borderless"]',
@@ -36,15 +36,15 @@ it('should render ColorInputPanel with input fields', async () => {
 
   await userEvent.click(swapButton);
   expect(element.textContent).toBe('HSL');
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(3);
+  expect(container.querySelectorAll('.iui-input').length).toBe(3);
 
   await userEvent.click(swapButton);
   expect(element.textContent).toBe('RGB');
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(3);
+  expect(container.querySelectorAll('.iui-input').length).toBe(3);
 
   await userEvent.click(swapButton);
   expect(element.textContent).toBe('HEX');
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(1);
+  expect(container.querySelectorAll('.iui-input').length).toBe(1);
 });
 
 it('should render ColorInputPanel with input fields with alpha', async () => {
@@ -65,7 +65,7 @@ it('should render ColorInputPanel with input fields with alpha', async () => {
 
   expect(container.querySelector('.iui-color-input')).toBeTruthy();
   expect(container.querySelector('.iui-color-input-fields')).toBeTruthy();
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(1);
+  expect(container.querySelectorAll('.iui-input').length).toBe(1);
 
   const swapButton = container.querySelector(
     '.iui-button[data-iui-variant="borderless"]',
@@ -74,15 +74,15 @@ it('should render ColorInputPanel with input fields with alpha', async () => {
 
   await userEvent.click(swapButton);
   expect(element.textContent).toBe('HSLA');
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(4);
+  expect(container.querySelectorAll('.iui-input').length).toBe(4);
 
   await userEvent.click(swapButton);
   expect(element.textContent).toBe('RGBA');
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(4);
+  expect(container.querySelectorAll('.iui-input').length).toBe(4);
 
   await userEvent.click(swapButton);
   expect(element.textContent).toBe('HEX');
-  expect(container.querySelectorAll('.iui-input-container').length).toBe(1);
+  expect(container.querySelectorAll('.iui-input').length).toBe(1);
 });
 
 it('should only show allowed color formats on input panel', async () => {
diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx
index 48396898eb3..37d152c2058 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/index.js';
 import { Input } from '../Input/index.js';
-import { ColorValue, InputContainer, SvgSwap, Box } from '../utils/index.js';
+import { ColorValue, SvgSwap, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 
@@ -169,18 +169,44 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
   };
 
   const hexInputField = (
-    <InputContainer status={validHexInput ? undefined : 'negative'}>
+    <Input
+      size='small'
+      maxLength={showAlpha ? 9 : 7}
+      minLength={1}
+      placeholder='HEX'
+      value={input[0]}
+      onChange={(event) => {
+        const value = event.target.value.startsWith('#')
+          ? event.target.value
+          : `#${event.target.value}`;
+        setInput([value]);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      }}
+      onBlur={(event) => {
+        event.preventDefault();
+        handleColorInputChange();
+      }}
+      status={validHexInput ? undefined : 'negative'}
+    />
+  );
+
+  const hslInputs = (
+    <>
       <Input
         size='small'
-        maxLength={showAlpha ? 9 : 7}
-        minLength={1}
-        placeholder='HEX'
-        value={input[0]}
+        type='number'
+        min='0'
+        max='359'
+        step='.1'
+        placeholder='H'
+        value={input[0] ?? ''}
         onChange={(event) => {
-          const value = event.target.value.startsWith('#')
-            ? event.target.value
-            : `#${event.target.value}`;
-          setInput([value]);
+          setInput([event.target.value, input[1], input[2], input[3]]);
         }}
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
@@ -190,95 +216,86 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         }}
         onBlur={(event) => {
           event.preventDefault();
-          handleColorInputChange();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
         }}
-      />
-    </InputContainer>
-  );
-
-  const hslInputs = (
-    <>
-      <InputContainer
         status={
           Number(input[0]) < 0 || Number(input[0]) > 360
             ? 'negative'
             : undefined
         }
-      >
-        <Input
-          size='small'
-          type='number'
-          min='0'
-          max='359'
-          step='.1'
-          placeholder='H'
-          value={input[0] ?? ''}
-          onChange={(event) => {
-            setInput([event.target.value, input[1], input[2], input[3]]);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          }}
-          onBlur={(event) => {
+      />
+      <Input
+        size='small'
+        type='number'
+        min='0'
+        max='100'
+        step='.1'
+        placeholder='S'
+        value={input[1] ?? ''}
+        onChange={(event) => {
+          setInput([input[0], event.target.value, input[2], input[3]]);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
             event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          }}
-        />
-      </InputContainer>
-      <InputContainer
+            handleColorInputChange();
+          }
+        }}
+        onBlur={(event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        }}
         status={
           Number(input[1]) < 0 || Number(input[1]) > 100
             ? 'negative'
             : undefined
         }
-      >
-        <Input
-          size='small'
-          type='number'
-          min='0'
-          max='100'
-          step='.1'
-          placeholder='S'
-          value={input[1] ?? ''}
-          onChange={(event) => {
-            setInput([input[0], event.target.value, input[2], input[3]]);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          }}
-          onBlur={(event) => {
+      />
+      <Input
+        size='small'
+        type='number'
+        min='0'
+        max='100'
+        step='.1'
+        placeholder='L'
+        value={input[2] ?? ''}
+        onChange={(event) => {
+          setInput([input[0], input[1], event.target.value, input[3]]);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
             event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          }}
-        />
-      </InputContainer>
-      <InputContainer
+            handleColorInputChange();
+          }
+        }}
+        onBlur={(event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        }}
         status={
           Number(input[2]) < 0 || Number(input[2]) > 100
             ? 'negative'
             : undefined
         }
-      >
+      />
+
+      {showAlpha && (
         <Input
           size='small'
           type='number'
           min='0'
-          max='100'
-          step='.1'
-          placeholder='L'
-          value={input[2] ?? ''}
+          max='1'
+          step='.01'
+          placeholder='A'
+          value={input[3] ?? ''}
           onChange={(event) => {
-            setInput([input[0], input[1], event.target.value, input[3]]);
+            setInput([input[0], input[1], input[2], event.target.value]);
           }}
           onKeyDown={(event) => {
             if (event.key === 'Enter') {
@@ -292,125 +309,115 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
               handleColorInputChange();
             }
           }}
-        />
-      </InputContainer>
-      {showAlpha && (
-        <InputContainer
           status={
             Number(input[3]) < 0 || Number(input[3]) > 1
               ? 'negative'
               : undefined
           }
-        >
-          <Input
-            size='small'
-            type='number'
-            min='0'
-            max='1'
-            step='.01'
-            placeholder='A'
-            value={input[3] ?? ''}
-            onChange={(event) => {
-              setInput([input[0], input[1], input[2], event.target.value]);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                event.preventDefault();
-                handleColorInputChange();
-              }
-            }}
-            onBlur={(event) => {
-              event.preventDefault();
-              if (!isFocusInside(event.relatedTarget)) {
-                handleColorInputChange();
-              }
-            }}
-          />
-        </InputContainer>
+        />
       )}
     </>
   );
 
   const rgbInputs = (
     <>
-      <InputContainer
+      <Input
+        size='small'
+        type='number'
+        min='0'
+        max='255'
+        placeholder='R'
+        value={input[0] ?? ''}
+        onChange={(event) => {
+          setInput([event.target.value, input[1], input[2], input[3]]);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            handleColorInputChange();
+          }
+        }}
+        onBlur={(event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        }}
         status={
           Number(input[0]) < 0 || Number(input[0]) > 255
             ? 'negative'
             : undefined
         }
-      >
-        <Input
-          size='small'
-          type='number'
-          min='0'
-          max='255'
-          placeholder='R'
-          value={input[0] ?? ''}
-          onChange={(event) => {
-            setInput([event.target.value, input[1], input[2], input[3]]);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          }}
-          onBlur={(event) => {
+      />
+
+      <Input
+        size='small'
+        type='number'
+        min='0'
+        max='255'
+        placeholder='G'
+        value={input[1] ?? ''}
+        onChange={(event) => {
+          setInput([input[0], event.target.value, input[2], input[3]]);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
             event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          }}
-        />
-      </InputContainer>
-      <InputContainer
+            handleColorInputChange();
+          }
+        }}
+        onBlur={(event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        }}
         status={
           Number(input[1]) < 0 || Number(input[1]) > 255
             ? 'negative'
             : undefined
         }
-      >
-        <Input
-          size='small'
-          type='number'
-          min='0'
-          max='255'
-          placeholder='G'
-          value={input[1] ?? ''}
-          onChange={(event) => {
-            setInput([input[0], event.target.value, input[2], input[3]]);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          }}
-          onBlur={(event) => {
+      />
+
+      <Input
+        size='small'
+        type='number'
+        min='0'
+        max='255'
+        placeholder={'B'}
+        value={input[2] ?? ''}
+        onChange={(event) => {
+          setInput([input[0], input[1], event.target.value, input[3]]);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
             event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          }}
-        />
-      </InputContainer>
-      <InputContainer
+            handleColorInputChange();
+          }
+        }}
+        onBlur={(event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        }}
         status={
           Number(input[2]) < 0 || Number(input[2]) > 255
             ? 'negative'
             : undefined
         }
-      >
+      />
+      {showAlpha && (
         <Input
           size='small'
           type='number'
           min='0'
-          max='255'
-          placeholder={'B'}
-          value={input[2] ?? ''}
+          max='1'
+          step='.01'
+          placeholder='A'
+          value={input[3] ?? ''}
           onChange={(event) => {
-            setInput([input[0], input[1], event.target.value, input[3]]);
+            setInput([input[0], input[1], input[2], event.target.value]);
           }}
           onKeyDown={(event) => {
             if (event.key === 'Enter') {
@@ -424,41 +431,12 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
               handleColorInputChange();
             }
           }}
-        />
-      </InputContainer>
-      {showAlpha && (
-        <InputContainer
           status={
             Number(input[3]) < 0 || Number(input[3]) > 1
               ? 'negative'
               : undefined
           }
-        >
-          <Input
-            size='small'
-            type='number'
-            min='0'
-            max='1'
-            step='.01'
-            placeholder='A'
-            value={input[3] ?? ''}
-            onChange={(event) => {
-              setInput([input[0], input[1], input[2], event.target.value]);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                event.preventDefault();
-                handleColorInputChange();
-              }
-            }}
-            onBlur={(event) => {
-              event.preventDefault();
-              if (!isFocusInside(event.relatedTarget)) {
-                handleColorInputChange();
-              }
-            }}
-          />
-        </InputContainer>
+        />
       )}
     </>
   );
diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx
index bf37d3d3f56..1a44d70ad24 100644
--- a/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx
+++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx
@@ -31,7 +31,7 @@ const renderComponent = (
 
 const assertBaseElement = (container: HTMLElement) => {
   const rootElement = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLDivElement;
 
   const input = rootElement.querySelector('.iui-input') as HTMLInputElement;
@@ -45,7 +45,7 @@ const assertBaseElement = (container: HTMLElement) => {
 
 it('should render in its most basic state', () => {
   const { container } = renderComponent();
-  const id = container.querySelector('.iui-input-container')?.id;
+  const id = container.querySelector('.iui-input-grid')?.id;
   const input = assertBaseElement(container);
 
   fireEvent.focus(input);
@@ -82,7 +82,11 @@ it('should render with selected value', () => {
 
 it('should render caret icon correctly', () => {
   const { container } = renderComponent();
-  let icon = container.querySelector('.iui-end-icon svg') as HTMLElement;
+  let icon = container.querySelector(
+    '.iui-end-icon.iui-svg-icon > svg',
+  ) as HTMLElement;
+
+  const input = container.querySelector('input') as HTMLElement;
 
   const {
     container: { firstChild: caretDown },
@@ -92,14 +96,17 @@ it('should render caret icon correctly', () => {
   expect(document.querySelector('.iui-menu')).toBeFalsy();
 
   // open
-  fireEvent.click(icon);
-  icon = container.querySelector('.iui-end-icon svg') as HTMLElement;
+  fireEvent.click(input);
+  icon = container.querySelector('.iui-end-icon.iui-open > svg') as HTMLElement;
   expect(icon).toEqual(caretDown);
   expect(document.querySelector('.iui-menu')).toBeVisible();
+  const menuItem = document.querySelector('.iui-list-item') as HTMLLIElement;
 
   // close
-  fireEvent.click(icon);
-  icon = container.querySelector('.iui-end-icon svg') as HTMLElement;
+  fireEvent.click(menuItem);
+  icon = container.querySelector(
+    '.iui-end-icon.iui-svg-icon > svg',
+  ) as HTMLElement;
   expect(icon).toEqual(caretDown);
   expect(document.querySelector('.iui-menu')).not.toBeVisible();
 });
@@ -473,9 +480,7 @@ it('should accept inputProps', () => {
   expect(input.id).toBe(inputId);
 
   fireEvent.focus(input);
-  expect(container.querySelector('.iui-input-container')?.id).toBe(
-    `${inputId}-cb`,
-  );
+  expect(container.querySelector('.iui-input-grid')?.id).toBe(`${inputId}-cb`);
   expect(document.querySelector('.iui-menu')?.id).toBe(`${inputId}-cb-list`);
 });
 
@@ -526,8 +531,9 @@ it('should work with custom itemRenderer', async () => {
 it('should accept status prop', () => {
   const { container } = renderComponent({ status: 'negative' });
 
-  expect(container.querySelector('.iui-input-container')).toHaveClass(
-    'iui-negative',
+  expect(container.querySelector('.iui-input-grid')).toHaveAttribute(
+    'data-iui-status',
+    'negative',
   );
 });
 
@@ -540,9 +546,7 @@ it('should render with message', () => {
     ),
   });
   assertBaseElement(container);
-  const message = container.querySelector(
-    '.iui-message > .my-message',
-  ) as HTMLElement;
+  const message = container.querySelector('.my-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toBe('Message');
 });
@@ -552,7 +556,7 @@ it('should render with message as string', () => {
     message: 'My message as string',
   });
   assertBaseElement(container);
-  const message = container.querySelector('.iui-message') as HTMLElement;
+  const message = container.querySelector('.iui-status-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toBe('My message as string');
 });
@@ -563,15 +567,15 @@ it('should render with message as string and status', () => {
     status: 'warning',
   });
   assertBaseElement(container);
-  const message = container.querySelector('.iui-message') as HTMLElement;
+  const message = container.querySelector('.iui-status-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toBe('My message as string');
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(container);
-  expect(inputContainer).toHaveClass('iui-warning');
-  expect(inputContainer.querySelector('.iui-input-icon')).toBeTruthy();
+  expect(inputContainer).toHaveAttribute('data-iui-status', 'warning');
+  expect(inputContainer.querySelector('.iui-svg-icon')).toBeTruthy();
 });
 
 it('should render with custom icon', () => {
@@ -584,10 +588,10 @@ it('should render with custom icon', () => {
   });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(container);
-  expect(inputContainer.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  expect(inputContainer.querySelector('.iui-svg-icon .my-icon')).toBeTruthy();
 });
 
 it('should render with message and status', () => {
@@ -597,12 +601,12 @@ it('should render with message and status', () => {
   });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(container);
-  expect(inputContainer).toHaveClass('iui-positive');
-  expect(inputContainer.querySelector('.iui-input-icon')).toBeTruthy();
-  const message = container.querySelector('.iui-message') as HTMLElement;
+  expect(inputContainer).toHaveAttribute('data-iui-status', 'positive');
+  expect(inputContainer.querySelector('.iui-svg-icon')).toBeTruthy();
+  const message = container.querySelector('.iui-status-message') as HTMLElement;
   expect(message.textContent).toBe('Text here');
 });
 
@@ -649,13 +653,15 @@ it('should call onExpand and onCollapse when dropdown is opened and closed', asy
     onHide: onCollapse,
   });
 
-  const icon = container.querySelector('.iui-end-icon svg') as HTMLElement;
-  await userEvent.click(icon);
+  const input = container.querySelector('input') as HTMLElement;
+  await userEvent.click(input);
   const list = document.querySelector('.iui-menu') as HTMLUListElement;
   expect(list).toBeVisible();
   expect(onExpand).toHaveBeenCalled();
 
-  await userEvent.click(icon);
+  const menuItem = document.querySelector('.iui-list-item') as HTMLLIElement;
+
+  await userEvent.click(menuItem);
   expect(list).not.toBeVisible();
   expect(onCollapse).toHaveBeenCalled();
 });
@@ -762,7 +768,7 @@ it('should select multiple options', async () => {
   );
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLDivElement;
   await userEvent.tab();
   await userEvent.click(screen.getByText('Item 1'));
@@ -800,7 +806,7 @@ it('should override multiple selected options', async () => {
   );
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLDivElement;
 
   const tags = inputContainer.querySelectorAll('.iui-select-tag');
diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx
index 1f3ac7a511d..2f8bef8f059 100644
--- a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx
+++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx
@@ -193,7 +193,6 @@ export const ComboBox = <T,>(props: ComboBoxProps<T>) => {
   // Refs get set in subcomponents
   const inputRef = React.useRef<HTMLInputElement>(null);
   const menuRef = React.useRef<HTMLUListElement>(null);
-  const toggleButtonRef = React.useRef<HTMLSpanElement>(null);
   const onChangeProp = useLatestRef(onChange);
   const optionsRef = useLatestRef(options);
 
@@ -514,7 +513,7 @@ export const ComboBox = <T,>(props: ComboBoxProps<T>) => {
 
   return (
     <ComboBoxRefsContext.Provider
-      value={{ inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef }}
+      value={{ inputRef, menuRef, optionsExtraInfoRef }}
     >
       <ComboBoxActionContext.Provider value={dispatch}>
         <ComboBoxStateContext.Provider
@@ -530,10 +529,11 @@ export const ComboBox = <T,>(props: ComboBoxProps<T>) => {
             multiple,
           }}
         >
-          <ComboBoxInputContainer disabled={inputProps?.disabled} {...rest}>
+          <ComboBoxInputContainer {...rest}>
             <>
               <ComboBoxInput
                 value={inputValue}
+                disabled={inputProps?.disabled}
                 {...inputProps}
                 onChange={handleOnInput}
                 selectTags={
diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxDropdown.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxDropdown.tsx
index 92240cfdbd3..74e565b525c 100644
--- a/packages/itwinui-react/src/core/ComboBox/ComboBoxDropdown.tsx
+++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxDropdown.tsx
@@ -13,7 +13,6 @@ import {
   ComboBoxActionContext,
   ComboBoxRefsContext,
 } from './helpers.js';
-import type { Instance, Props } from 'tippy.js';
 
 type ComboBoxDropdownProps = PopoverProps & { children: JSX.Element };
 
@@ -21,7 +20,7 @@ export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   const { isOpen } = useSafeContext(ComboBoxStateContext);
   const dispatch = useSafeContext(ComboBoxActionContext);
-  const { inputRef, toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
+  const { inputRef } = useSafeContext(ComboBoxRefsContext);
 
   // sync internal isOpen state with user's visible prop
   React.useEffect(() => {
@@ -34,14 +33,9 @@ export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
     <Popover
       placement='bottom-start'
       visible={isOpen}
-      onClickOutside={React.useCallback(
-        (_: Instance<Props>, { target }: Event) => {
-          if (!toggleButtonRef.current?.contains(target as Element)) {
-            dispatch({ type: 'close' });
-          }
-        },
-        [dispatch, toggleButtonRef],
-      )}
+      onClickOutside={React.useCallback(() => {
+        dispatch({ type: 'close' });
+      }, [dispatch])}
       animation='shift-away'
       duration={200}
       reference={inputRef}
diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx
index 95721ea906d..282f108e073 100644
--- a/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx
+++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx
@@ -4,15 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  useSafeContext,
-  useMergedRefs,
-  SvgCaretDownSmall,
-  mergeEventHandlers,
-  Box,
-} from '../utils/index.js';
+import { SvgCaretDownSmall, Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers.js';
 
 type ComboBoxEndIconProps = {
   disabled?: boolean;
@@ -20,38 +13,24 @@ type ComboBoxEndIconProps = {
 };
 
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    onClick: onClickProp,
-    disabled,
-    isOpen,
-    ...rest
-  } = props;
-  const dispatch = useSafeContext(ComboBoxActionContext);
-  const { toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(toggleButtonRef, forwardedRef);
+  const { className, children, disabled, isOpen, ...rest } = props;
 
   return (
-    <Box
+    <Icon
       as='span'
-      ref={refs}
+      ref={forwardedRef}
       className={cx(
         'iui-end-icon',
         {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         },
         className,
       )}
-      onClick={mergeEventHandlers(onClickProp, () => {
-        dispatch({ type: isOpen ? 'close' : 'open' });
-      })}
       {...rest}
     >
       {children ?? <SvgCaretDownSmall aria-hidden />}
-    </Box>
+    </Icon>
   );
 }) as PolymorphicForwardRefComponent<'span', ComboBoxEndIconProps>;
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';
diff --git a/packages/itwinui-react/src/core/ComboBox/helpers.ts b/packages/itwinui-react/src/core/ComboBox/helpers.ts
index e83107050e7..2e2b7fba13a 100644
--- a/packages/itwinui-react/src/core/ComboBox/helpers.ts
+++ b/packages/itwinui-react/src/core/ComboBox/helpers.ts
@@ -65,7 +65,6 @@ export const ComboBoxRefsContext = React.createContext<
   | {
       inputRef: React.RefObject<HTMLInputElement>;
       menuRef: React.RefObject<HTMLUListElement>;
-      toggleButtonRef: React.RefObject<HTMLSpanElement>;
       optionsExtraInfoRef: React.MutableRefObject<
         Record<string, { __originalIndex: number }>
       >;
diff --git a/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx b/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx
index d43ef681cac..eb30039e731 100644
--- a/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx
+++ b/packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx
@@ -64,9 +64,7 @@ it('should render disabled group', () => {
   expect(fieldset).toBeTruthy();
   expect(fieldset.disabled).toBe(true);
 
-  const inputContainers = container.querySelectorAll(
-    '.iui-input-container.iui-disabled',
-  );
+  const inputContainers = container.querySelectorAll('.iui-input-grid');
   expect(inputContainers.length).toBe(1);
 
   const inputs = container.querySelectorAll('input');
diff --git a/packages/itwinui-react/src/core/Input/Input.tsx b/packages/itwinui-react/src/core/Input/Input.tsx
index 3ef3e6196dc..c993637fdcf 100644
--- a/packages/itwinui-react/src/core/Input/Input.tsx
+++ b/packages/itwinui-react/src/core/Input/Input.tsx
@@ -12,6 +12,10 @@ export type InputProps = {
    * Modify size of the input.
    */
   size?: 'small' | 'large';
+  /**
+   * Status of input.
+   */
+  status?: 'positive' | 'warning' | 'negative';
   /**
    * Modify the native `size` attribute of the `<input>` element.
    * The `width` or `inline-size` property must be unset in order to use this prop.
@@ -27,7 +31,7 @@ export type InputProps = {
  * <Input size='small' />
  */
 export const Input = React.forwardRef((props, ref) => {
-  const { size, htmlSize, className, ...rest } = props;
+  const { size, htmlSize, status, className, ...rest } = props;
   const inputRef = React.useRef<HTMLInputElement>(null);
   const refs = useMergedRefs<HTMLInputElement>(inputRef, ref);
 
@@ -36,6 +40,7 @@ export const Input = React.forwardRef((props, ref) => {
       as='input'
       className={cx('iui-input', className)}
       data-iui-size={size}
+      data-iui-status={status}
       size={htmlSize}
       ref={refs}
       {...rest}
diff --git a/packages/itwinui-react/src/core/InputGrid/InputGrid.test.tsx b/packages/itwinui-react/src/core/InputGrid/InputGrid.test.tsx
new file mode 100644
index 00000000000..fadfe0f6503
--- /dev/null
+++ b/packages/itwinui-react/src/core/InputGrid/InputGrid.test.tsx
@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { InputGrid } from './InputGrid.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { Label } from '../Label/Label.js';
+
+const assertBaseElement = (container: HTMLElement) => {
+  const inputContainer = container.querySelector('.iui-input-grid');
+  expect(inputContainer).toBeTruthy();
+  return inputContainer;
+};
+
+it('should render correctly in its most basic state', () => {
+  const { container } = render(
+    <InputGrid>
+      <Label>label</Label>
+      <input />
+      <StatusMessage>message</StatusMessage>
+    </InputGrid>,
+  );
+  assertBaseElement(container);
+});
+
+it('should render correctly with inline label', () => {
+  const { container } = render(
+    <InputGrid labelPlacement='inline'>
+      <Label>label</Label>
+      <input />
+      <StatusMessage>message</StatusMessage>
+    </InputGrid>,
+  );
+  assertBaseElement(container);
+  const inputContainer = container.querySelector('.iui-input-grid');
+  expect(inputContainer).toHaveAttribute('data-iui-label-placement', 'inline');
+});
+
+it('should take class and style', () => {
+  const { container } = render(
+    <InputGrid className='my-class' style={{ width: 50 }}>
+      <Label>label</Label>
+      <input />
+      <StatusMessage>message</StatusMessage>
+    </InputGrid>,
+  );
+  assertBaseElement(container);
+  const inputContainer = container.querySelector(
+    '.iui-input-grid',
+  ) as HTMLElement;
+  expect(inputContainer).toHaveClass('iui-input-grid my-class');
+  expect(inputContainer.style.width).toBe('50px');
+});
diff --git a/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx b/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx
new file mode 100644
index 00000000000..c4958e0021b
--- /dev/null
+++ b/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx
@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Box } from '../utils/index.js';
+import cx from 'classnames';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+
+type InputGridOwnProps = {
+  /**
+   * Set display style of label.
+   * Supported values:
+   * - 'default' - label appears above input.
+   * - 'inline' - appears in the same line as input.
+   * @default 'default'
+   */
+  labelPlacement?: 'default' | 'inline';
+};
+
+//-------------------------------------------------------------------------------
+
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+export const InputGrid = React.forwardRef((props, ref) => {
+  const { children, className, labelPlacement = undefined, ...rest } = props;
+
+  return (
+    <Box
+      className={cx('iui-input-grid', className)}
+      data-iui-label-placement={labelPlacement}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+}) as PolymorphicForwardRefComponent<'div', InputGridOwnProps>;
+
+//-------------------------------------------------------------------------------
+
+export default InputGrid;
diff --git a/packages/itwinui-react/src/core/InputGrid/index.ts b/packages/itwinui-react/src/core/InputGrid/index.ts
new file mode 100644
index 00000000000..f3ac67df9fc
--- /dev/null
+++ b/packages/itwinui-react/src/core/InputGrid/index.ts
@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { InputGrid } from './InputGrid.js';
+export default './InputGrid';
diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
index 5d2ebbdfc59..1bbaa743b34 100644
--- a/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
+++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx
@@ -16,9 +16,9 @@ it('should render correctly in its most basic state', () => {
       <Checkbox />
     </InputGroup>,
   );
-  expect(container.querySelector('.iui-input-container')).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
   const label = getByText('some label') as HTMLElement;
-  expect(label.className).toBe('iui-label');
+  expect(label.className).toBe('iui-input-label');
   expect(container.querySelectorAll('input').length).toBe(2);
 });
 
@@ -29,9 +29,7 @@ it('should render disabled group', () => {
       <Checkbox disabled />
     </InputGroup>,
   );
-  expect(
-    container.querySelector('.iui-input-container.iui-disabled'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
   getByText('some label');
   const inputs = container.querySelectorAll('input');
   expect(inputs.length).toBe(2);
@@ -45,8 +43,8 @@ it('should render required group', () => {
       <Checkbox required />
     </InputGroup>,
   );
-  expect(container.querySelector('.iui-input-container')).toBeTruthy();
-  expect(container.querySelector('.iui-label.iui-required')).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
+  expect(container.querySelector('.iui-input-label.iui-required')).toBeTruthy();
 
   const inputs = container.querySelectorAll('input');
   expect(inputs.length).toBe(2);
@@ -64,11 +62,9 @@ it('should render message', () => {
       <Radio />
     </InputGroup>,
   );
-  expect(container.querySelector('.iui-input-container')).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
   getByText('some label');
-  const message = container.querySelector(
-    '.iui-message > .my-message',
-  ) as HTMLElement;
+  const message = container.querySelector('.my-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toBe('Message');
   expect(container.querySelectorAll('input').length).toBe(3);
@@ -88,11 +84,12 @@ it.each(['positive', 'negative', 'warning'] as const)(
         <Radio />
       </InputGroup>,
     );
-    expect(
-      container.querySelector(`.iui-input-container.iui-${status}`),
-    ).toBeTruthy();
+    expect(container.querySelector(`.iui-status-message`)).toHaveAttribute(
+      'data-iui-status',
+      status,
+    );
     getByText('some label');
-    expect(container.querySelector('.iui-input-icon')).toBeTruthy();
+    expect(container.querySelector('.iui-svg-icon')).toBeTruthy();
   },
 );
 
@@ -105,13 +102,78 @@ it('should take class and style on container', () => {
     </InputGroup>,
   );
   const groupContainer = container.querySelector(
-    '.iui-input-container.my-class',
+    '.iui-input-grid.my-class',
   ) as HTMLElement;
   expect(groupContainer).toBeTruthy();
   expect(groupContainer.style.width).toBe('80px');
   getByText('some label');
 });
 
+it('should take class and style on inner element', () => {
+  const { container, getByText } = render(
+    <InputGroup
+      label='some label'
+      innerProps={{ className: 'my-class', style: { width: 80 } }}
+    >
+      <Checkbox />
+      <Checkbox />
+      <Checkbox />
+    </InputGroup>,
+  );
+  const innerEl = container.querySelector(
+    '.iui-input-group.my-class',
+  ) as HTMLElement;
+  expect(innerEl).toBeTruthy();
+  expect(innerEl.style.width).toBe('80px');
+  getByText('some label');
+});
+
+it('should take class and style on label', () => {
+  const { container, getByText } = render(
+    <InputGroup
+      label='some label'
+      labelProps={{ className: 'my-class', style: { width: 80 } }}
+    >
+      <Checkbox />
+      <Checkbox />
+      <Checkbox />
+    </InputGroup>,
+  );
+  const label = container.querySelector(
+    '.iui-input-label.my-class',
+  ) as HTMLElement;
+  expect(label).toBeTruthy();
+  expect(label.style.width).toBe('80px');
+  getByText('some label');
+});
+
+it('should take class and style on message', () => {
+  const { container, getByText } = render(
+    <InputGroup
+      label='some label'
+      message='Test message'
+      svgIcon={<svg />}
+      messageProps={{
+        contentProps: { className: 'my-class', style: { width: 80 } },
+        iconProps: { className: 'my-icon-class', style: { width: 60 } },
+      }}
+    >
+      <Checkbox />
+      <Checkbox />
+      <Checkbox />
+    </InputGroup>,
+  );
+  const content = container.querySelector('.my-class') as HTMLElement;
+  expect(content).toBeTruthy();
+  expect(content.style.width).toBe('80px');
+  const icon = container.querySelector(
+    '.iui-svg-icon.my-icon-class',
+  ) as HTMLElement;
+  expect(icon).toBeTruthy();
+  expect(icon.style.width).toBe('60px');
+  getByText('some label');
+});
+
 it('should render inline group', () => {
   const { container, getByText, queryByText } = render(
     <InputGroup
@@ -125,12 +187,14 @@ it('should render inline group', () => {
       <Checkbox />
     </InputGroup>,
   );
-  expect(
-    container.querySelector('.iui-input-container.iui-inline-label'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toHaveAttribute(
+    'data-iui-label-placement',
+    'inline',
+  );
   getByText('some group label');
   expect(queryByText('My message')).toBeNull();
-  expect(container.querySelector('.iui-input-icon')).toBeTruthy();
+  expect(container.querySelector('.iui-svg-icon')).toBeTruthy();
 });
 
 it('should take custom icon', () => {
@@ -145,9 +209,10 @@ it('should take custom icon', () => {
       <Checkbox />
     </InputGroup>,
   );
-  expect(
-    container.querySelector('.iui-input-container.iui-inline-label'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toHaveAttribute(
+    'data-iui-label-placement',
+    'inline',
+  );
   getByText('some group label');
-  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  expect(container.querySelector('.iui-svg-icon > .my-icon')).toBeTruthy();
 });
diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx
index 86e818a83f7..856b484c530 100644
--- a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx
+++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx
@@ -3,8 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
+import cx from 'classnames';
+import { StatusIconMap, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/index.js';
+import { Label } from '../Label/index.js';
+import { StatusMessage } from '../StatusMessage/index.js';
 
 type InputGroupProps = {
   /**
@@ -42,6 +46,21 @@ type InputGroupProps = {
    * Child inputs inside group.
    */
   children: React.ReactNode;
+  /**
+   * Passes properties for label.
+   */
+  labelProps?: React.ComponentProps<'label'>;
+  /**
+   * Passes properties for message.
+   */
+  messageProps?: Pick<
+    React.ComponentProps<typeof StatusMessage>,
+    'iconProps' | 'contentProps'
+  >;
+  /**
+   * Passes properties for inner input group element.
+   */
+  innerProps?: React.ComponentProps<'div'>;
 };
 
 /**
@@ -61,6 +80,7 @@ type InputGroupProps = {
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
   const {
+    className,
     children,
     disabled = false,
     displayStyle = 'default',
@@ -69,6 +89,9 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     status,
     svgIcon,
     required = false,
+    labelProps,
+    messageProps,
+    innerProps,
     ...rest
   } = props;
 
@@ -85,19 +108,36 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
   };
 
   return (
-    <InputContainer
-      label={label}
-      disabled={disabled}
-      required={required}
-      status={status}
-      message={message}
-      icon={icon()}
-      isLabelInline={displayStyle === 'inline'}
+    <InputGrid
       ref={forwardedRef}
+      as='div'
+      labelPlacement={displayStyle}
+      className={cx('iui-input-group-wrapper', className)}
       {...rest}
     >
-      <Box className='iui-input-group'>{children}</Box>
-    </InputContainer>
+      {label && (
+        <Label
+          as='label'
+          required={required}
+          disabled={disabled}
+          {...labelProps}
+        >
+          {label}
+        </Label>
+      )}
+      <Box
+        as='div'
+        {...innerProps}
+        className={cx('iui-input-group', innerProps?.className)}
+      >
+        {children}
+      </Box>
+      {(message || status || svgIcon) && (
+        <StatusMessage startIcon={icon()} status={status} {...messageProps}>
+          {displayStyle !== 'inline' && message}
+        </StatusMessage>
+      )}
+    </InputGrid>
   );
 }) as PolymorphicForwardRefComponent<'div', InputGroupProps>;
 
diff --git a/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.test.tsx b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.test.tsx
new file mode 100644
index 00000000000..7f3f3372ee0
--- /dev/null
+++ b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.test.tsx
@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { InputWithDecorations } from './InputWithDecorations.js';
+
+const assertBaseElement = (container: HTMLElement) => {
+  expect(container.querySelector('div')).toHaveClass(
+    'iui-input-flex-container',
+  );
+};
+
+it('should render correctly in its most basic state', () => {
+  const { container } = render(
+    <InputWithDecorations>
+      <InputWithDecorations.Input />
+      <InputWithDecorations.Button>+</InputWithDecorations.Button>
+    </InputWithDecorations>,
+  );
+  assertBaseElement(container);
+  expect(container.querySelector('input')).toBeTruthy();
+  expect(container.querySelector('button')).toBeTruthy();
+});
+
+it('should render disabled component', () => {
+  const { container } = render(
+    <InputWithDecorations isDisabled>
+      <InputWithDecorations.Input />
+      <InputWithDecorations.Button>+</InputWithDecorations.Button>
+    </InputWithDecorations>,
+  );
+  assertBaseElement(container);
+  expect(container.querySelector('input')).toBeDisabled();
+  expect(container.querySelector('button')).toHaveAttribute(
+    'aria-disabled',
+    'true',
+  );
+});
+
+it('should take class and style', () => {
+  const { container } = render(
+    <InputWithDecorations className='my-class' style={{ width: 50 }}>
+      <InputWithDecorations.Input />
+      <InputWithDecorations.Button>+</InputWithDecorations.Button>
+    </InputWithDecorations>,
+  );
+  assertBaseElement(container);
+  const inputContainer = container.querySelector(
+    '.iui-input-flex-container.my-class',
+  ) as HTMLElement;
+  expect(inputContainer).toBeTruthy();
+  expect(inputContainer.style.width).toBe('50px');
+});
+
+it.each(['small', 'large'] as const)(
+  'should render small and large sizes',
+  (size) => {
+    const { container } = render(
+      <InputWithDecorations size={size}>
+        <InputWithDecorations.Input />
+        <InputWithDecorations.Button>+</InputWithDecorations.Button>
+      </InputWithDecorations>,
+    );
+    expect(
+      container.querySelector(`.iui-input-flex-container`),
+    ).toHaveAttribute('data-iui-size', size);
+    expect(container.querySelector(`input`)).toHaveAttribute(
+      'data-iui-size',
+      size,
+    );
+    expect(container.querySelector(`button`)).toHaveAttribute(
+      'data-iui-size',
+      size,
+    );
+  },
+);
+
+it.each(['positive', 'warning', 'negative'] as const)(
+  'should render $status status',
+  (status) => {
+    const { container } = render(
+      <InputWithDecorations status={status}>
+        <InputWithDecorations.Input />
+        <InputWithDecorations.Button>+</InputWithDecorations.Button>
+      </InputWithDecorations>,
+    );
+    expect(
+      container.querySelector(`.iui-input-flex-container`),
+    ).toHaveAttribute('data-iui-status', status);
+  },
+);
diff --git a/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx
new file mode 100644
index 00000000000..0864944924e
--- /dev/null
+++ b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx
@@ -0,0 +1,104 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { IconButton } from '../Buttons/index.js';
+import type { InputProps } from '../Input/Input.js';
+
+const InputWithDecorationsContext = React.createContext<
+  React.ComponentProps<typeof InputFlexContainer> | undefined
+>(undefined);
+
+const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
+  const { children, size, isDisabled, ...rest } = props;
+  return (
+    <InputWithDecorationsContext.Provider value={{ size, isDisabled }}>
+      <InputFlexContainer
+        isDisabled={isDisabled}
+        size={size}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </InputFlexContainer>
+    </InputWithDecorationsContext.Provider>
+  );
+}) as PolymorphicForwardRefComponent<
+  'div',
+  React.ComponentProps<typeof InputFlexContainer>
+>;
+
+//-------------------------------------------------------------------------------
+
+const InputWithDecorationsInput = React.forwardRef((props, ref) => {
+  const { id: idProp, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+
+  return (
+    <Box
+      as='input'
+      ref={ref}
+      data-iui-size={size ?? contextSize}
+      disabled={localDisabled ?? isDisabled}
+      id={idProp}
+      {...rest}
+    />
+  );
+}) as PolymorphicForwardRefComponent<'input', InputProps>;
+
+//-------------------------------------------------------------------------------
+
+const InputWithDecorationsButton = React.forwardRef((props, ref) => {
+  const { children, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+
+  return (
+    <IconButton
+      ref={ref}
+      size={size ?? contextSize}
+      styleType='borderless'
+      disabled={localDisabled ?? isDisabled}
+      {...rest}
+    >
+      {children}
+    </IconButton>
+  );
+}) as PolymorphicForwardRefComponent<
+  'span',
+  React.ComponentProps<typeof IconButton>
+>;
+
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+export const InputWithDecorations = Object.assign(
+  InputWithDecorationsComponent,
+  {
+    /**
+     * Subcomponent to include input in your InputWithDecorations
+     */
+    Input: InputWithDecorationsInput,
+    /**
+     * Subcomponent to include button in your InputWithDecorations
+     */
+    Button: InputWithDecorationsButton,
+  },
+);
diff --git a/packages/itwinui-react/src/core/InputWithDecorations/index.ts b/packages/itwinui-react/src/core/InputWithDecorations/index.ts
new file mode 100644
index 00000000000..6b37420da4f
--- /dev/null
+++ b/packages/itwinui-react/src/core/InputWithDecorations/index.ts
@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { InputWithDecorations } from './InputWithDecorations.js';
+export default './Input';
diff --git a/packages/itwinui-react/src/core/Label/Label.tsx b/packages/itwinui-react/src/core/Label/Label.tsx
index 748514449bd..e05f08bf66e 100644
--- a/packages/itwinui-react/src/core/Label/Label.tsx
+++ b/packages/itwinui-react/src/core/Label/Label.tsx
@@ -20,6 +20,11 @@ type LabelOwnProps = {
    * This adds an asterisk next to the label text.
    */
   required?: boolean;
+  /**
+   * Adds disabled styling to a label.
+   * @default false
+   */
+  disabled?: boolean;
 };
 
 /**
@@ -33,6 +38,7 @@ export const Label = React.forwardRef((props, forwardedRef) => {
   const {
     displayStyle = 'block',
     required,
+    disabled,
     className,
     children,
     ...rest
@@ -49,6 +55,7 @@ export const Label = React.forwardRef((props, forwardedRef) => {
         },
         className,
       )}
+      data-iui-disabled={disabled ? true : undefined}
       ref={forwardedRef}
       {...rest}
     >
diff --git a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.test.tsx b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.test.tsx
index 5d3305d68d6..b609b267d89 100644
--- a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.test.tsx
+++ b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.test.tsx
@@ -8,17 +8,19 @@ import * as React from 'react';
 import { LabeledInput } from './LabeledInput.js';
 
 const assertBaseElement = (container: HTMLElement) => {
-  const inputContainer = container.querySelector('.iui-input-container');
+  const inputContainer = container.querySelector('.iui-input-grid');
   expect(inputContainer).toBeTruthy();
-  expect(container.querySelector('.iui-input')).toBeTruthy();
   return inputContainer;
 };
 
 it('should render correctly in its most basic state', () => {
   const { container, getByText } = render(<LabeledInput label='some label' />);
   assertBaseElement(container);
+  expect(
+    container.querySelector('.iui-input-flex-container > input'),
+  ).toBeTruthy();
   const label = getByText('some label') as HTMLElement;
-  expect(label.className).toBe('iui-label');
+  expect(label.className).toBe('iui-input-label');
 });
 
 it('should render disabled component', () => {
@@ -26,9 +28,10 @@ it('should render disabled component', () => {
     <LabeledInput label='some label' disabled />,
   );
   assertBaseElement(container);
-  expect(
-    container.querySelector('.iui-input-container.iui-disabled'),
-  ).toBeTruthy();
+  expect(container.querySelector('.iui-input-flex-container')).toBeTruthy();
+  const label = container.querySelector('.iui-input-label');
+  expect(label).toBeTruthy();
+  expect(label).toHaveAttribute('data-iui-disabled', 'true');
   getByText('some label');
   expect((container.querySelector('input') as HTMLInputElement).disabled).toBe(
     true,
@@ -38,7 +41,8 @@ it('should render disabled component', () => {
 it('should handle required attribute', () => {
   const { container } = render(<LabeledInput label='some label' required />);
   assertBaseElement(container);
-  expect(container.querySelector('.iui-label.iui-required')).toBeTruthy();
+  expect(container.querySelector('.iui-input-flex-container')).toBeTruthy();
+  expect(container.querySelector('.iui-input-label.iui-required')).toBeTruthy();
   expect(
     (container.querySelector('input') as HTMLInputElement).required,
   ).toBeTruthy();
@@ -51,12 +55,10 @@ it('should render message', () => {
       message={<div className='my-message'>Message</div>}
     />,
   );
-  const inputContainer = assertBaseElement(container);
-  expect(inputContainer).toHaveClass('iui-with-message');
+  assertBaseElement(container);
   getByText('some label');
-  const message = container.querySelector(
-    '.iui-message > .my-message',
-  ) as HTMLElement;
+  expect(container.querySelector('.iui-input-flex-container')).toBeTruthy();
+  const message = container.querySelector('.my-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toBe('Message');
 });
@@ -67,14 +69,31 @@ it.each(['positive', 'negative', 'warning'] as const)(
     const { container, getByText } = render(
       <LabeledInput label='some label' status={status} />,
     );
-    const inputContainer = assertBaseElement(container);
-    expect(inputContainer).toHaveClass(`iui-${status}`);
+    assertBaseElement(container);
+    const input = container.querySelector('.iui-input-flex-container');
+    expect(input).toBeTruthy();
+    expect(input).toHaveAttribute('data-iui-status', status);
     getByText('some label');
-    expect(container.querySelector('.iui-input-icon')).toBeTruthy();
   },
 );
 
 it('should take class and style on container', () => {
+  const { container, getByText } = render(
+    <LabeledInput
+      label='some label'
+      wrapperProps={{ className: 'my-class', style: { width: 80 } }}
+    />,
+  );
+  assertBaseElement(container);
+  getByText('some label');
+  const inputContainer = container.querySelector(
+    '.iui-input-grid.my-class',
+  ) as HTMLElement;
+  expect(inputContainer).toBeTruthy();
+  expect(inputContainer.style.width).toBe('80px');
+});
+
+it('should take class and style on input', () => {
   const { container, getByText } = render(
     <LabeledInput
       label='some label'
@@ -85,29 +104,48 @@ it('should take class and style on container', () => {
   assertBaseElement(container);
   getByText('some label');
   const inputContainer = container.querySelector(
-    '.iui-input-container.my-class',
+    'input.my-class',
   ) as HTMLElement;
   expect(inputContainer).toBeTruthy();
   expect(inputContainer.style.width).toBe('80px');
 });
 
+it('should take class and style on label', () => {
+  const { container, getByText } = render(
+    <LabeledInput
+      label='some label'
+      labelProps={{ className: 'my-class', style: { width: 80 } }}
+    />,
+  );
+  assertBaseElement(container);
+  getByText('some label');
+  const label = container.querySelector(
+    '.iui-input-label.my-class',
+  ) as HTMLElement;
+  expect(label).toBeTruthy();
+  expect(label.style.width).toBe('80px');
+});
+
 it('should take class and style on input', () => {
   const { container, getByText } = render(
     <LabeledInput
       label='some label'
-      inputClassName='my-class'
-      inputStyle={{ width: 80 }}
+      className='my-class'
+      style={{ width: 80 }}
     />,
   );
   assertBaseElement(container);
   getByText('some label');
-  const input = container.querySelector('.iui-input.my-class') as HTMLElement;
+  const input = container.querySelector(
+    '.iui-input-flex-container > input.my-class',
+  ) as HTMLElement;
   expect(input).toBeTruthy();
+  console.log(input.style.width);
   expect(input.style.width).toBe('80px');
 });
 
 it('should render inline input', () => {
-  const { container, getByText, queryByText } = render(
+  const { container, getByText } = render(
     <LabeledInput
       label='some label'
       displayStyle='inline'
@@ -116,10 +154,11 @@ it('should render inline input', () => {
     />,
   );
   const inputContainer = assertBaseElement(container);
-  expect(inputContainer).toHaveClass('iui-inline-label', 'iui-inline-icon');
+  expect(container.querySelector('.iui-input-flex-container')).toBeTruthy();
+  expect(inputContainer).toHaveAttribute('data-iui-label-placement', 'inline');
   getByText('some label');
-  expect(queryByText('My message')).toBeNull();
-  expect(container.querySelector('.iui-input-icon')).toBeTruthy();
+  getByText('My message');
+  expect(container.querySelector('.iui-svg-icon')).toBeTruthy();
 });
 
 it('should take custom icon', () => {
@@ -132,14 +171,12 @@ it('should take custom icon', () => {
   );
   assertBaseElement(container);
   getByText('some label');
-  expect(
-    container.querySelector('.iui-input-container.iui-inline-label'),
-  ).toBeTruthy();
-  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  expect(container.querySelector('.iui-input-flex-container')).toBeTruthy();
+  expect(container.querySelector('.my-icon')).toBeTruthy();
 });
 
 it('should render inline icon', () => {
-  const { container, queryByText } = render(
+  const { container, queryByText, getByText } = render(
     <LabeledInput
       label='some label'
       iconDisplayStyle='inline'
@@ -148,9 +185,11 @@ it('should render inline icon', () => {
     />,
   );
   const inputContainer = assertBaseElement(container);
-  expect(inputContainer).toHaveClass('iui-inline-icon', 'iui-with-message');
-  expect(inputContainer).not.toHaveClass('iui-inline-label');
-  expect(queryByText('some label')).toHaveClass('iui-label');
-  expect(queryByText('My message')).toHaveClass('iui-message');
-  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  expect(inputContainer).not.toHaveAttribute(
+    'data-iui-label-placement',
+    'inline',
+  );
+  expect(queryByText('some label')).toHaveClass('iui-input-label');
+  getByText('My message');
+  expect(container.querySelector('.my-icon')).toBeTruthy();
 });
diff --git a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx
index 32c3eaa9dbb..daadfae06e4 100644
--- a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx
+++ b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx
@@ -4,9 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import type { InputProps } from '../Input/Input.js';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
+import { StatusIconMap, useId, Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/index.js';
+import { InputWithDecorations } from '../InputWithDecorations/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { Label } from '../Label/Label.js';
 
 export type LabeledInputProps = {
   /**
@@ -26,13 +29,9 @@ export type LabeledInputProps = {
    */
   svgIcon?: JSX.Element;
   /**
-   * Custom CSS class name for the input element.
+   * Pass props to wrapper element.
    */
-  inputClassName?: string;
-  /**
-   * Custom CSS Style for the input element.
-   */
-  inputStyle?: React.CSSProperties;
+  wrapperProps?: React.ComponentProps<typeof InputGrid>;
   /**
    * Set display style of label.
    * Supported values:
@@ -50,7 +49,23 @@ export type LabeledInputProps = {
    * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
    */
   iconDisplayStyle?: 'block' | 'inline';
-} & InputProps;
+  /**
+   * Passes properties for message content.
+   */
+  messageContentProps?: React.ComponentPropsWithRef<'div'>;
+  /**
+   * Passes properties for icon.
+   */
+  iconProps?: React.ComponentProps<typeof Icon>;
+  /**
+   * Passes properties for label.
+   */
+  labelProps?: React.ComponentProps<'label'>;
+  /**
+   *  Passes properties for input wrapper.
+   */
+  inputWrapperProps?: React.ComponentProps<typeof InputWithDecorations>;
+} & React.ComponentProps<typeof Input>;
 
 /**
  * Basic labeled input component
@@ -64,15 +79,16 @@ export const LabeledInput = React.forwardRef((props, ref) => {
   const uid = useId();
 
   const {
-    className,
     disabled = false,
     label,
     message,
     status,
     svgIcon,
-    style,
-    inputClassName,
-    inputStyle,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
     displayStyle = 'default',
     iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline',
     required = false,
@@ -83,29 +99,51 @@ export const LabeledInput = React.forwardRef((props, ref) => {
   const icon = svgIcon ?? (status && StatusIconMap[status]());
 
   return (
-    <InputContainer
-      label={label}
-      disabled={disabled}
-      required={required}
-      status={status}
-      message={message}
-      icon={icon}
-      isLabelInline={displayStyle === 'inline'}
-      isIconInline={iconDisplayStyle === 'inline'}
-      className={className}
-      style={style}
-      inputId={id}
-    >
-      <Input
-        disabled={disabled}
-        className={inputClassName}
-        style={inputStyle}
-        required={required}
-        ref={ref}
-        id={id}
-        {...rest}
-      />
-    </InputContainer>
+    <InputGrid labelPlacement={displayStyle} {...wrapperProps}>
+      {label && (
+        <Label
+          as='label'
+          required={required}
+          disabled={disabled}
+          htmlFor={id}
+          {...labelProps}
+        >
+          {label}
+        </Label>
+      )}
+
+      <InputWithDecorations
+        status={status}
+        isDisabled={disabled}
+        {...inputWrapperProps}
+      >
+        <InputWithDecorations.Input
+          disabled={disabled}
+          required={required}
+          id={id}
+          ref={ref}
+          {...rest}
+        />
+        {icon && iconDisplayStyle === 'inline' && (
+          <Icon fill={!svgIcon ? status : undefined} padded {...iconProps}>
+            {icon}
+          </Icon>
+        )}
+      </InputWithDecorations>
+
+      {typeof message === 'string' ? (
+        <StatusMessage
+          status={status}
+          startIcon={displayStyle === 'default' ? icon : undefined}
+          iconProps={iconProps}
+          contentProps={messageContentProps}
+        >
+          {message}
+        </StatusMessage>
+      ) : (
+        message
+      )}
+    </InputGrid>
   );
 }) as PolymorphicForwardRefComponent<'input', LabeledInputProps>;
 
diff --git a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.test.tsx b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.test.tsx
index 430ada89119..d299f8418b9 100644
--- a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.test.tsx
+++ b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.test.tsx
@@ -10,7 +10,7 @@ import type { SelectMultipleTypeProps } from '../Select/Select.js';
 
 const assertBaseElement = (inputContainer: HTMLElement) => {
   expect(inputContainer).toBeTruthy();
-  const label = inputContainer.querySelector('.iui-label') as HTMLElement;
+  const label = inputContainer.querySelector('.iui-input-label') as HTMLElement;
   expect(label).toBeTruthy();
   expect(label.textContent).toEqual('Test label');
   const select = inputContainer.querySelector(
@@ -38,14 +38,14 @@ it('should render correctly in its most basic state', () => {
   const { container } = renderComponent();
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(inputContainer);
 });
 
 it('should have correct accessible name', () => {
   const { container } = renderComponent();
-  const label = container.querySelector('.iui-label') as HTMLElement;
+  const label = container.querySelector('.iui-input-label') as HTMLElement;
   expect(container.querySelector('[role=combobox]')).toHaveAttribute(
     'aria-labelledby',
     `${label.id}`,
@@ -58,12 +58,10 @@ it('should render message', () => {
   });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(inputContainer);
-  const message = container.querySelector(
-    '.iui-message > .my-message',
-  ) as HTMLElement;
+  const message = container.querySelector('.my-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toBe('Message');
 });
@@ -77,27 +75,28 @@ it.each(['positive', 'warning', 'negative'] as const)(
     });
 
     const inputContainer = container.querySelector(
-      '.iui-input-container',
+      '.iui-input-grid',
     ) as HTMLElement;
     assertBaseElement(inputContainer);
-    expect(
-      container.querySelector(`.iui-input-container.iui-${status}`),
-    ).toBeTruthy();
-    expect(container.querySelector('.iui-input-icon')).toBeTruthy();
-    expect(container.querySelector('.iui-message')).toBeTruthy();
+    const select = container.querySelector(`.iui-select-button`) as HTMLElement;
+    expect(select).toHaveAttribute('data-iui-status', status);
+    expect(container.querySelector('.iui-svg-icon')).toBeTruthy();
+    expect(container.querySelector('.iui-status-message')).toBeTruthy();
   },
 );
 
 it('should render with custom icon', () => {
   const { container } = renderComponent({
     svgIcon: <svg className='my-icon' />,
+    message: 'my message',
   });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(inputContainer);
-  expect(inputContainer.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  const icon = inputContainer.querySelector('.iui-svg-icon > .my-icon');
+  expect(icon).toBeTruthy();
 });
 
 it('should render inline style', () => {
@@ -106,37 +105,17 @@ it('should render inline style', () => {
   });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container.iui-inline-label',
-  ) as HTMLElement;
-  assertBaseElement(inputContainer);
-  expect(inputContainer.querySelector('.iui-message')).toBeFalsy();
-});
-
-it('should render with custom className on container', () => {
-  const { container } = renderComponent({ className: 'test-className' });
-
-  const inputContainer = container.querySelector(
-    '.iui-input-container',
-  ) as HTMLElement;
-  assertBaseElement(inputContainer);
-  expect(inputContainer.classList).toContain('test-className');
-});
-
-it('should render with custom style on container', () => {
-  const { container } = renderComponent({ style: { color: 'red' } });
-
-  const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(inputContainer);
-  expect(inputContainer.style.color).toEqual('red');
+  expect(inputContainer.querySelector('.iui-status-message')).toBeFalsy();
 });
 
 it('should render with custom className on select', () => {
-  const { container } = renderComponent({ selectClassName: 'test-className' });
+  const { container } = renderComponent({ className: 'test-className' });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(inputContainer);
   const select = inputContainer.querySelector(
@@ -148,11 +127,11 @@ it('should render with custom className on select', () => {
 
 it('should render with custom style on select', () => {
   const { container } = renderComponent({
-    selectStyle: { color: 'red' },
+    style: { color: 'red' },
   });
 
   const inputContainer = container.querySelector(
-    '.iui-input-container',
+    '.iui-input-grid',
   ) as HTMLElement;
   assertBaseElement(inputContainer);
   const select = inputContainer.querySelector(
@@ -162,11 +141,50 @@ it('should render with custom style on select', () => {
   expect(select.style.color).toEqual('red');
 });
 
+it('should render with custom style on wrapper', () => {
+  const { container } = renderComponent({
+    wrapperProps: { style: { color: 'red' }, className: 'my-classname' },
+  });
+
+  const inputContainer = container.querySelector(
+    '.iui-input-grid.my-classname',
+  );
+  expect(inputContainer).toBeTruthy();
+  expect((inputContainer as HTMLElement).style.color).toEqual('red');
+});
+
+it('should render with custom style on label', () => {
+  const { container } = renderComponent({
+    labelProps: { style: { color: 'red' }, className: 'my-classname' },
+  });
+
+  const label = container.querySelector('.iui-input-label.my-classname');
+  expect(label).toBeTruthy();
+  expect((label as HTMLElement).style.color).toEqual('red');
+});
+
+it('should render with custom style on message', () => {
+  const { container } = renderComponent({
+    message: 'Test message',
+    svgIcon: <svg />,
+    messageContentProps: { style: { color: 'red' }, className: 'my-classname' },
+    messageIconProps: {
+      style: { color: 'green' },
+      className: 'my-icon-classname',
+    },
+  });
+
+  const content = container.querySelector('.my-classname');
+  expect(content).toBeTruthy();
+  expect((content as HTMLElement).style.color).toEqual('red');
+  const icon = container.querySelector('.iui-svg-icon.my-icon-classname');
+  expect(icon).toBeTruthy();
+  expect((icon as HTMLElement).style.color).toEqual('green');
+});
+
 it('should handle required attribute', () => {
   const { container } = renderComponent({ required: true });
-  assertBaseElement(
-    container.querySelector('.iui-input-container') as HTMLElement,
-  );
+  assertBaseElement(container.querySelector('.iui-input-grid') as HTMLElement);
 
-  expect(container.querySelector('.iui-label.iui-required')).toBeTruthy();
+  expect(container.querySelector('.iui-input-label.iui-required')).toBeTruthy();
 });
diff --git a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx
index 82891665740..bb78b894d1a 100644
--- a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx
+++ b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx
@@ -6,8 +6,11 @@ import * as React from 'react';
 
 import { Select } from '../Select/index.js';
 import type { SelectProps } from '../Select/Select.js';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
+import { StatusIconMap, useId, Icon } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Label } from '../Label/Label.js';
 
 export type LabeledSelectProps<T> = {
   /**
@@ -28,18 +31,26 @@ export type LabeledSelectProps<T> = {
    */
   svgIcon?: JSX.Element;
   /**
-   * Custom CSS class name for the select element.
+   * If true, shows a red asterisk but does not prevent form submission.
+   * @default false
    */
-  selectClassName?: string;
+  required?: boolean;
   /**
-   * Custom CSS Style for the select element.
+   * Pass props to wrapper element.
    */
-  selectStyle?: React.CSSProperties;
+  wrapperProps?: React.ComponentProps<typeof InputGrid>;
   /**
-   * If true, shows a red asterisk but does not prevent form submission.
-   * @default false
+   * Passes properties for label.
    */
-  required?: boolean;
+  labelProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes properties for message content.
+   */
+  messageContentProps?: React.ComponentPropsWithRef<'div'>;
+  /**
+   * Passes properties for message icon.
+   */
+  messageIconProps?: React.ComponentProps<typeof Icon>;
 } & Pick<LabeledInputProps, 'displayStyle'> &
   SelectProps<T>;
 
@@ -88,10 +99,12 @@ export const LabeledSelect = <T,>(
     svgIcon,
     displayStyle = 'default',
     style,
-    selectClassName,
-    selectStyle,
     required = false,
     triggerProps,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    messageIconProps,
     ...rest
   } = props;
 
@@ -99,7 +112,7 @@ export const LabeledSelect = <T,>(
 
   const icon = () => {
     if (svgIcon) {
-      return React.cloneElement(svgIcon, { 'aria-hidden': true });
+      return <Icon>{svgIcon}</Icon>;
     }
     if (status && message) {
       return StatusIconMap[status]();
@@ -108,29 +121,42 @@ export const LabeledSelect = <T,>(
   };
 
   return (
-    <InputContainer
-      label={label}
-      disabled={disabled}
-      required={required}
-      status={status}
-      message={message}
-      icon={displayStyle === 'default' ? icon() : undefined}
-      isLabelInline={displayStyle === 'inline'}
-      className={className}
-      style={style}
-      labelId={labelId}
-    >
+    <InputGrid labelPlacement={displayStyle} {...wrapperProps}>
+      {label && (
+        <Label
+          as='div'
+          required={required}
+          disabled={disabled}
+          id={labelId}
+          {...labelProps}
+        >
+          {label}
+        </Label>
+      )}
       <Select
         disabled={disabled}
-        className={selectClassName}
-        style={selectStyle}
+        className={className}
+        style={style}
+        status={status}
         {...rest}
         triggerProps={{
           'aria-labelledby': labelId,
           ...triggerProps,
         }}
       />
-    </InputContainer>
+      {typeof message === 'string' ? (
+        <StatusMessage
+          status={status}
+          startIcon={displayStyle === 'default' ? icon() : undefined}
+          iconProps={messageIconProps}
+          contentProps={messageContentProps}
+        >
+          {message}
+        </StatusMessage>
+      ) : (
+        message
+      )}
+    </InputGrid>
   );
 };
 
diff --git a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.test.tsx b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.test.tsx
index 5a7666f075a..03b0ee63ff1 100644
--- a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.test.tsx
+++ b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.test.tsx
@@ -10,15 +10,11 @@ import { LabeledTextarea } from './LabeledTextarea.js';
 it('should render correctly in its most basic state', () => {
   const { container } = render(<LabeledTextarea label='test-label' />);
 
-  const label = container.querySelector(
-    '.iui-input-container .iui-label',
-  ) as HTMLElement;
+  const label = container.querySelector('.iui-input-label') as HTMLElement;
   expect(label).toBeTruthy();
   expect(label.textContent).toEqual('test-label');
 
-  const textarea = container.querySelector(
-    '.iui-input-container textarea.iui-input',
-  );
+  const textarea = container.querySelector('.iui-input-grid textarea');
   expect(textarea).toBeTruthy();
 });
 
@@ -27,7 +23,7 @@ it('should show a message', () => {
     <LabeledTextarea label='test-label' message='test-message' />,
   );
 
-  const message = container.querySelector('.iui-message') as HTMLElement;
+  const message = container.querySelector('.iui-status-message') as HTMLElement;
   expect(message).toBeTruthy();
   expect(message.textContent).toEqual('test-message');
 });
@@ -37,10 +33,8 @@ it('should show status', () => {
     <LabeledTextarea label='Label' status='negative' />,
   );
 
-  const labelContainer = container.querySelector(
-    '.iui-input-container.iui-negative',
-  );
-  expect(labelContainer).toBeTruthy();
+  const input = container.querySelector('.iui-input-flex-container');
+  expect(input).toHaveAttribute('data-iui-status', 'negative');
 });
 
 it('should be disabled', () => {
@@ -48,14 +42,10 @@ it('should be disabled', () => {
     <LabeledTextarea label='Label' disabled={true} />,
   );
 
-  const labelContainer = container.querySelector(
-    '.iui-input-container.iui-disabled',
-  );
-  expect(labelContainer).toBeTruthy();
+  const input = container.querySelector('.iui-input-flex-container');
+  expect(input).toHaveAttribute('data-iui-disabled', 'true');
 
-  const textarea = container.querySelector(
-    '.iui-input-container textarea.iui-input',
-  ) as HTMLTextAreaElement;
+  const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
   expect(textarea).toBeTruthy();
   expect(textarea.disabled).toBe(true);
 });
@@ -63,11 +53,11 @@ it('should be disabled', () => {
 it('should handle required attribute', () => {
   const { container } = render(<LabeledTextarea label='Label' required />);
 
-  expect(container.querySelector('.iui-input-container')).toBeTruthy();
-  expect(container.querySelector('.iui-label.iui-required')).toBeTruthy();
+  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
+  expect(container.querySelector('.iui-input-label.iui-required')).toBeTruthy();
 
   const textarea = container.querySelector(
-    '.iui-input-container textarea.iui-input',
+    '.iui-input-grid textarea',
   ) as HTMLTextAreaElement;
   expect(textarea).toBeTruthy();
   expect(textarea.required).toBeTruthy();
@@ -77,40 +67,53 @@ it('should add custom class names and styles', () => {
   const { container } = render(
     <LabeledTextarea
       label='Label'
-      className={'test-classname'}
-      style={{ width: 100 }}
-      textareaClassName={'test-textarea-classname'}
-      textareaStyle={{ width: 50 }}
+      svgIcon={<svg />}
+      message='Test message'
+      wrapperProps={{ className: 'test-classname', style: { width: 100 } }}
+      className={'test-textarea-classname'}
+      style={{ width: 50 }}
+      labelProps={{ className: 'test-label-classname' }}
+      iconProps={{ className: 'my-icon' }}
+      messageContentProps={{ className: 'my-message' }}
     />,
   );
 
   const labelContainer = container.querySelector(
-    '.iui-input-container.test-classname',
+    '.iui-input-grid.test-classname',
   ) as HTMLElement;
   expect(labelContainer).toBeTruthy();
   expect(labelContainer.style.width).toBe('100px');
 
   const textarea = container.querySelector(
-    '.iui-input-container textarea.iui-input.test-textarea-classname',
+    '.iui-input-grid textarea.test-textarea-classname',
   ) as HTMLElement;
   expect(textarea).toBeTruthy();
   expect(textarea.style.width).toBe('50px');
+
+  const label = container.querySelector(
+    '.iui-input-label.test-label-classname',
+  ) as HTMLElement;
+  expect(label).toBeTruthy();
+
+  const icon = container.querySelector('.iui-svg-icon.my-icon') as HTMLElement;
+  expect(icon).toBeTruthy();
+
+  const content = container.querySelector('.my-message') as HTMLElement;
+  expect(content).toBeTruthy();
 });
 
 it('should render without label when it is undefined', () => {
   const { container } = render(<LabeledTextarea label={undefined} />);
 
-  const label = container.querySelector('.iui-input-container .iui-label');
+  const label = container.querySelector('.iui-input-grid .iui-input-label');
   expect(label).toBeNull();
 
-  const textarea = container.querySelector(
-    '.iui-input-container textarea.iui-input',
-  );
+  const textarea = container.querySelector('.iui-input-grid textarea');
   expect(textarea).toBeTruthy();
 });
 
 it('should render inline input', () => {
-  const { container, getByText, queryByText } = render(
+  const { container, getByText } = render(
     <LabeledTextarea
       label='some label'
       displayStyle='inline'
@@ -119,11 +122,9 @@ it('should render inline input', () => {
     />,
   );
   getByText('some label');
-  expect(
-    container.querySelector('.iui-input-container.iui-inline-label'),
-  ).toBeTruthy();
-  expect(queryByText('My message')).toBeNull();
-  expect(container.querySelector('.iui-input-icon')).toBeTruthy();
+  const grid = container.querySelector('.iui-input-grid');
+  expect(grid).toHaveAttribute('data-iui-label-placement', 'inline');
+  expect(container.querySelector('.iui-svg-icon')).toBeTruthy();
 });
 
 it('should take custom icon', () => {
@@ -135,14 +136,13 @@ it('should take custom icon', () => {
     />,
   );
   getByText('some label');
-  expect(
-    container.querySelector('.iui-input-container.iui-inline-label'),
-  ).toBeTruthy();
-  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  const grid = container.querySelector('.iui-input-grid');
+  expect(grid).toHaveAttribute('data-iui-label-placement', 'inline');
+  expect(container.querySelector('.my-icon')).toBeTruthy();
 });
 
 it('should render inline icon', () => {
-  const { container, queryByText } = render(
+  const { container, getByText } = render(
     <LabeledTextarea
       label='some label'
       iconDisplayStyle='inline'
@@ -150,10 +150,12 @@ it('should render inline icon', () => {
       message='My message'
     />,
   );
-  const inputContainer = container.querySelector('.iui-input-container');
-  expect(inputContainer).toHaveClass('iui-inline-icon', 'iui-with-message');
-  expect(inputContainer).not.toHaveClass('iui-inline-label');
-  expect(queryByText('some label')).toHaveClass('iui-label');
-  expect(queryByText('My message')).toHaveClass('iui-message');
-  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
+  const inputContainer = container.querySelector('.iui-input-grid');
+  expect(inputContainer).not.toHaveAttribute(
+    'data-iui-label-placement',
+    'inline',
+  );
+  expect(getByText('some label')).toHaveClass('iui-input-label');
+  getByText('My message');
+  expect(container.querySelector('.iui-svg-icon > .my-icon')).toBeTruthy();
 });
diff --git a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx
index 231f502e3c9..7569bb1d8a4 100644
--- a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx
+++ b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx
@@ -3,10 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
+import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { Textarea } from '../Textarea/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { LabeledInput } from '../LabeledInput/index.js';
 
 type LabeledTextareaProps = {
   /**
@@ -22,13 +23,21 @@ type LabeledTextareaProps = {
    */
   status?: 'positive' | 'warning' | 'negative';
   /**
-   * Custom class name for textarea.
+   * Pass props to wrapper element.
    */
-  textareaClassName?: string;
+  wrapperProps?: React.ComponentProps<typeof InputGrid>;
   /**
-   * Custom style for textarea.
+   * Passes properties for label.
    */
-  textareaStyle?: React.CSSProperties;
+  labelProps?: React.ComponentProps<'label'>;
+  /**
+   * Passes properties for message content.
+   */
+  messageContentProps?: React.ComponentPropsWithRef<'div'>;
+  /**
+   * Passes properties for svgIcon.
+   */
+  iconProps?: React.ComponentProps<typeof Icon>;
 } & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle' | 'iconDisplayStyle'>;
 
 /**
@@ -52,52 +61,12 @@ type LabeledTextareaProps = {
  *  status='negative'
  * />
  */
-export const LabeledTextarea = React.forwardRef((props, ref) => {
-  const uid = useId();
-
-  const {
-    className,
-    style,
-    disabled = false,
-    label,
-    message,
-    status,
-    textareaClassName,
-    textareaStyle,
-    displayStyle = 'default',
-    iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline',
-    svgIcon,
-    required = false,
-    id = uid,
-    ...textareaProps
-  } = props;
-
-  const icon = svgIcon ?? (status && StatusIconMap[status]());
-
+export const LabeledTextarea = React.forwardRef((props, forwardedRef) => {
   return (
-    <InputContainer
-      label={label}
-      disabled={disabled}
-      required={required}
-      status={status}
-      message={message}
-      icon={icon}
-      isLabelInline={displayStyle === 'inline'}
-      isIconInline={iconDisplayStyle === 'inline'}
-      className={className}
-      style={style}
-      inputId={id}
-    >
-      <Textarea
-        disabled={disabled}
-        className={textareaClassName}
-        style={textareaStyle}
-        required={required}
-        id={id}
-        {...textareaProps}
-        ref={ref}
-      />
-    </InputContainer>
+    // ref types don't match but it's internal, so ts-ignore is ok here
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <LabeledInput as='textarea' rows={3} ref={forwardedRef} {...props} />
   );
 }) as PolymorphicForwardRefComponent<'textarea', LabeledTextareaProps>;
 
diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.test.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.test.tsx
index f67c2f6a066..94708ade605 100644
--- a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.test.tsx
+++ b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.test.tsx
@@ -17,11 +17,11 @@ it('should render without label', () => {
   );
   expect(
     container.querySelector(
-      '.iui-input-container > .iui-input-group > .iui-radio-tile-container',
+      '.iui-input-grid > .iui-input-group > .iui-radio-tile-container',
     ),
   ).toBeTruthy();
   expect(
-    container.querySelector('.iui-input-container > .iui-label'),
+    container.querySelector('.iui-input-container > .iui-input-label'),
   ).toBeNull();
 });
 
@@ -34,11 +34,11 @@ it('should render with label', () => {
   );
   expect(
     container.querySelector(
-      '.iui-input-container > .iui-input-group > .iui-radio-tile-container',
+      '.iui-input-grid > .iui-input-group > .iui-radio-tile-container',
     ),
   ).toBeTruthy();
   const label = container.querySelector(
-    '.iui-input-container > .iui-label',
+    '.iui-input-grid > .iui-input-label',
   ) as HTMLElement;
   expect(label).toBeTruthy();
   expect(label.textContent).toBe('My tiles');
diff --git a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx
index 3a9eab547fa..6da19dc3524 100644
--- a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx
+++ b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx
@@ -156,7 +156,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
           { 'iui-expandable-searchbox': expandable },
           className,
         )}
-        data-iui-size={size}
+        size={size}
         isDisabled={isDisabled}
         data-iui-expanded={isExpanded}
         {...rest}
diff --git a/packages/itwinui-react/src/core/Select/Select.tsx b/packages/itwinui-react/src/core/Select/Select.tsx
index 83fbee22a2f..9ae6c0e56ac 100644
--- a/packages/itwinui-react/src/core/Select/Select.tsx
+++ b/packages/itwinui-react/src/core/Select/Select.tsx
@@ -12,6 +12,7 @@ import {
   useId,
   AutoclearingHiddenLiveRegion,
   Box,
+  Icon,
 } from '../utils/index.js';
 import type {
   PopoverProps,
@@ -137,6 +138,10 @@ export type SelectProps<T> = {
    * Modify size of select.
    */
   size?: 'small' | 'large';
+  /**
+   * Status of select.
+   */
+  status?: 'positive' | 'warning' | 'negative';
   /**
    * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
    */
@@ -238,6 +243,7 @@ export const Select = <T,>(props: SelectProps<T>): JSX.Element => {
     popoverProps,
     multiple = false,
     triggerProps,
+    status,
     ...rest
   } = props;
 
@@ -248,7 +254,6 @@ export const Select = <T,>(props: SelectProps<T>): JSX.Element => {
   const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
 
   const selectRef = React.useRef<HTMLDivElement>(null);
-  const toggleButtonRef = React.useRef<HTMLSpanElement>(null);
 
   const onShowHandler = React.useCallback(
     (instance: PopoverInstance) => {
@@ -389,10 +394,8 @@ export const Select = <T,>(props: SelectProps<T>): JSX.Element => {
         onHide={onHideHandler}
         {...popoverProps}
         visible={isOpen}
-        onClickOutside={(_, { target }) => {
-          if (!toggleButtonRef.current?.contains(target as Element)) {
-            setIsOpen(false);
-          }
+        onClickOutside={() => {
+          setIsOpen(false);
         }}
       >
         <Box
@@ -400,6 +403,7 @@ export const Select = <T,>(props: SelectProps<T>): JSX.Element => {
           role='combobox'
           ref={selectRef}
           data-iui-size={size}
+          data-iui-status={status}
           onClick={() => !disabled && setIsOpen((o) => !o)}
           onKeyDown={(e) => !disabled && onKeyDown(e)}
           aria-disabled={disabled}
@@ -443,19 +447,16 @@ export const Select = <T,>(props: SelectProps<T>): JSX.Element => {
           )}
         </Box>
       </Popover>
-      <Box
+      <Icon
         as='span'
         aria-hidden
-        ref={toggleButtonRef}
         className={cx('iui-end-icon', {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         })}
-        onClick={() => !disabled && setIsOpen((o) => !o)}
       >
         <SvgCaretDownSmall />
-      </Box>
+      </Icon>
 
       {multiple ? (
         <AutoclearingHiddenLiveRegion text={liveRegionSelection} />
diff --git a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.test.tsx b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.test.tsx
index fff9ebe62e1..c69a62d7437 100644
--- a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.test.tsx
+++ b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.test.tsx
@@ -10,20 +10,23 @@ import { StatusIconMap } from '../utils/index.js';
 
 it('should render only message', () => {
   const { container } = render(<StatusMessage>This is my text</StatusMessage>);
-  const message = container.querySelector('.iui-message') as HTMLElement;
+  const message = container.querySelector('.iui-status-message') as HTMLElement;
   expect(message.textContent).toBe('This is my text');
-  expect(container.querySelector('.iui-input-icon')).toBeFalsy();
+  expect(container.querySelector('.iui-svg-icon')).toBeFalsy();
 });
 
 it.each(['positive', 'negative', 'warning'] as const)(
   'should render message with %s status icon',
   (status) => {
-    const { container } = render(
+    const { container, getByText } = render(
       <StatusMessage status={status}>This is my text</StatusMessage>,
     );
-    const message = container.querySelector('.iui-message') as HTMLElement;
-    expect(message.textContent).toBe('This is my text');
-    const icon = container.querySelector('.iui-input-icon') as HTMLElement;
+    const message = container.querySelector(
+      '.iui-status-message',
+    ) as HTMLElement;
+    expect(message).toBeTruthy();
+    getByText('This is my text');
+    const icon = container.querySelector('.iui-svg-icon') as HTMLElement;
     expect(icon).toBeTruthy();
     expect(icon.getAttribute('aria-hidden')).toBe('true');
 
@@ -35,15 +38,16 @@ it.each(['positive', 'negative', 'warning'] as const)(
 );
 
 it('should render message with custom icon', () => {
-  const { container } = render(
+  const { container, getByText } = render(
     <StatusMessage startIcon={<svg className='my-icon' />}>
       This is my text
     </StatusMessage>,
   );
-  const message = container.querySelector('.iui-message') as HTMLElement;
-  expect(message.textContent).toBe('This is my text');
-  expect(container.querySelector('.iui-input-icon .my-icon')).toBeTruthy();
-  expect(container.querySelector('.iui-input-icon')).toHaveAttribute(
+  const message = container.querySelector('.iui-status-message') as HTMLElement;
+  expect(message).toBeTruthy();
+  getByText('This is my text');
+  expect(container.querySelector('.iui-svg-icon > .my-icon')).toBeTruthy();
+  expect(container.querySelector('.iui-svg-icon')).toHaveAttribute(
     'aria-hidden',
     'true',
   );
diff --git a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx
index 123aec2fccc..f793eaf1c44 100644
--- a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx
+++ b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx
@@ -3,7 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, StatusIconMap } from '../utils/index.js';
+import { Box, StatusIconMap, Icon } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import cx from 'classnames';
 
 type StatusMessageProps = {
   /**
@@ -19,6 +21,14 @@ type StatusMessageProps = {
    * Status of the message.
    */
   status?: 'positive' | 'warning' | 'negative';
+  /**
+   * Passes props to icon
+   */
+  iconProps?: React.ComponentProps<typeof Icon>;
+  /**
+   * Passes props to content
+   */
+  contentProps?: React.ComponentPropsWithRef<'div'>;
 };
 
 /**
@@ -27,23 +37,34 @@ type StatusMessageProps = {
  * <StatusMessage>This is the text</StatusMessage>
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
-export const StatusMessage = ({
-  startIcon: userStartIcon,
-  children,
-  status,
-}: StatusMessageProps) => {
+export const StatusMessage = React.forwardRef((props, ref) => {
+  const {
+    children,
+    startIcon: userStartIcon,
+    status,
+    className,
+    iconProps,
+    contentProps,
+    ...rest
+  } = props;
+
   const icon = userStartIcon ?? (status && StatusIconMap[status]());
 
   return (
-    <>
+    <Box
+      className={cx('iui-status-message', className)}
+      data-iui-status={status}
+      ref={ref}
+      {...rest}
+    >
       {!!icon ? (
-        <Box as='span' className='iui-input-icon' aria-hidden>
+        <Icon aria-hidden {...iconProps}>
           {icon}
-        </Box>
+        </Icon>
       ) : null}
-      <Box className='iui-message'>{children}</Box>
-    </>
+      <Box {...contentProps}>{children}</Box>
+    </Box>
   );
-};
+}) as PolymorphicForwardRefComponent<'div', StatusMessageProps>;
 
 export default StatusMessage;
diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.test.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.test.tsx
index 0c49f9194cb..c170fd61644 100644
--- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.test.tsx
+++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.test.tsx
@@ -22,13 +22,12 @@ const renderComponent = (initialProps?: Partial<DatePickerInputProps>) => {
 it('should render correctly', async () => {
   const { container } = renderComponent();
 
-  const labeledInput = container.querySelector(
-    '.iui-input-container.iui-inline-label',
-  );
+  const labeledInput = container.querySelector('.iui-input-grid');
   expect(labeledInput).toBeTruthy();
+  expect(labeledInput).toHaveAttribute('data-iui-label-placement', 'inline');
 
   const iconButton = container.querySelector(
-    '.iui-input-icon .iui-button[data-iui-variant="borderless"]',
+    '.iui-input-flex-container > .iui-button[data-iui-variant="borderless"]',
   ) as HTMLButtonElement;
   expect(iconButton).toBeTruthy();
 
@@ -42,7 +41,7 @@ it('should render correctly with given date', () => {
   const { container } = renderComponent({ date });
 
   const input = container.querySelector(
-    '.iui-input-container input',
+    '.iui-input-flex-container input',
   ) as HTMLInputElement;
   expect(input).toBeTruthy();
   expect(input.value).toEqual(date.toISOString());
@@ -52,7 +51,7 @@ it('should render correctly with invalid given date', () => {
   const { container } = renderComponent({ date: new Date(' ') });
 
   const input = container.querySelector(
-    '.iui-input-container input',
+    '.iui-input-flex-container input',
   ) as HTMLInputElement;
   expect(input).toBeTruthy();
   expect(input.value).toEqual('');
@@ -63,7 +62,7 @@ it('should call onChange with parsed date', () => {
   const { container } = renderComponent({ onChange });
 
   const input = container.querySelector(
-    '.iui-input-container input',
+    '.iui-input-flex-container input',
   ) as HTMLInputElement;
   expect(input).toBeTruthy();
   fireEvent.change(input, { target: { value: '2021-05-17T21:00:00.000Z' } });
@@ -76,7 +75,7 @@ it('should not call onChange with invalid value', () => {
   const { container } = renderComponent({ onChange });
 
   const input = container.querySelector(
-    '.iui-input-container input',
+    '.iui-input-flex-container input',
   ) as HTMLInputElement;
   expect(input).toBeTruthy();
   fireEvent.change(input, { target: { value: ' ' } });
@@ -92,7 +91,7 @@ it('should call onChange when selected day from calendar', async () => {
   });
 
   const iconButton = container.querySelector(
-    '.iui-input-icon .iui-button[data-iui-variant="borderless"]',
+    '.iui-input-flex-container > .iui-button[data-iui-variant="borderless"]',
   ) as HTMLButtonElement;
   expect(iconButton).toBeTruthy();
   await userEvent.click(iconButton);
@@ -114,7 +113,7 @@ it('should call onChange with undefined when input field is cleared', async () =
   });
 
   const iconButton = container.querySelector(
-    '.iui-input-icon .iui-button[data-iui-variant="borderless"]',
+    '.iui-input-flex-container > .iui-button[data-iui-variant="borderless"]',
   ) as HTMLButtonElement;
   expect(iconButton).toBeTruthy();
   await userEvent.click(iconButton);
@@ -123,7 +122,7 @@ it('should call onChange with undefined when input field is cleared', async () =
   expect(onChange).toHaveBeenNthCalledWith(1, new Date(2021, 4, 7));
 
   const input = container.querySelector(
-    '.iui-input-container input',
+    '.iui-input-flex-container input',
   ) as HTMLInputElement;
   expect(input).toBeTruthy();
   fireEvent.change(input, { target: { value: '' } });
diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.tsx
index 871172f8a2d..6ed9c693c54 100644
--- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.tsx
+++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DatePickerInput.tsx
@@ -3,11 +3,13 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, SvgCalendar, isBefore } from '../../../utils/index.js';
+import { Popover, SvgCalendar, isBefore, useId } from '../../../utils/index.js';
+import type { LabeledInput } from '../../../LabeledInput/index.js';
 import type { PolymorphicForwardRefComponent } from '../../../utils/index.js';
-import { LabeledInput } from '../../../LabeledInput/index.js';
 import { DatePicker } from '../../../DatePicker/index.js';
-import { IconButton } from '../../../Buttons/index.js';
+import { InputGrid } from '../../../InputGrid/index.js';
+import { Label } from '../../../Label/index.js';
+import { InputWithDecorations } from '../../../InputWithDecorations/index.js';
 
 export type DatePickerInputProps = {
   date?: Date;
@@ -28,13 +30,21 @@ export type DatePickerInputProps = {
 >;
 
 const DatePickerInput = React.forwardRef((props, forwardedRef) => {
+  const uid = useId();
   const {
     onChange,
     date,
     parseInput,
     formatDate,
+    label,
+    required,
+    disabled,
     isFromOrTo,
     selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
     ...rest
   } = props;
 
@@ -102,23 +112,35 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
       }}
       appendTo='parent'
     >
-      <LabeledInput
-        ref={forwardedRef}
-        displayStyle='inline'
-        value={inputValue}
-        onChange={onInputChange}
-        onClick={close}
-        svgIcon={
-          <IconButton
-            styleType='borderless'
+      <InputGrid labelPlacement='inline' {...wrapperProps}>
+        <Label
+          as='label'
+          required={required}
+          disabled={disabled}
+          htmlFor={id}
+          {...labelProps}
+        >
+          {label}
+        </Label>
+        <InputWithDecorations {...inputWrapperProps}>
+          <InputWithDecorations.Input
+            id={id}
+            value={inputValue}
+            onChange={onInputChange}
+            onClick={close}
+            required={required}
+            disabled={disabled}
+            ref={forwardedRef}
+            {...rest}
+          />
+          <InputWithDecorations.Button
             onClick={() => setIsVisible((v) => !v)}
             ref={buttonRef}
           >
             <SvgCalendar />
-          </IconButton>
-        }
-        {...rest}
-      />
+          </InputWithDecorations.Button>
+        </InputWithDecorations>
+      </InputGrid>
     </Popover>
   );
 }) as PolymorphicForwardRefComponent<'input', DatePickerInputProps>;
diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx
index 4ffec75fde0..1f1f2963500 100644
--- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx
+++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx
@@ -26,17 +26,15 @@ const renderComponent = (initialProps?: Partial<DateRangeFilterProps<any>>) => {
 it('should render correctly', () => {
   const { container } = renderComponent();
 
-  const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label',
-  );
+  const labeledInputs = container.querySelectorAll('.iui-input-grid');
   expect(labeledInputs.length).toBe(2);
 
-  expect(labeledInputs[0].querySelector('.iui-label')?.textContent).toEqual(
-    'From',
-  );
-  expect(labeledInputs[1].querySelector('.iui-label')?.textContent).toEqual(
-    'To',
-  );
+  expect(
+    labeledInputs[0].querySelector('.iui-input-label')?.textContent,
+  ).toEqual('From');
+  expect(
+    labeledInputs[1].querySelector('.iui-input-label')?.textContent,
+  ).toEqual('To');
 
   screen.getByText('Filter');
   screen.getByText('Clear');
@@ -51,7 +49,7 @@ it('should render correctly with set filter value', () => {
   });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -64,7 +62,7 @@ it('should set filter when both values entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -84,7 +82,7 @@ it('should set filter when only From is entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -103,7 +101,7 @@ it('should set filter when only To is entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -122,7 +120,7 @@ it('should set filter when both values entered and Enter is pressed', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -145,7 +143,7 @@ it('should set filter with empty values when invalid date is entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -161,7 +159,7 @@ it('should set filter with empty values when date is not fully entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -186,7 +184,7 @@ it('should set filter and keep time from existing dates', () => {
   });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-flex-container > input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx
index e02a11b51e6..c4f65400a00 100644
--- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx
+++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx
@@ -26,17 +26,15 @@ const renderComponent = (
 it('should render correctly', () => {
   const { container } = renderComponent();
 
-  const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label',
-  );
+  const labeledInputs = container.querySelectorAll('.iui-input-grid');
   expect(labeledInputs.length).toBe(2);
 
-  expect(labeledInputs[0].querySelector('.iui-label')?.textContent).toEqual(
-    'From',
-  );
-  expect(labeledInputs[1].querySelector('.iui-label')?.textContent).toEqual(
-    'To',
-  );
+  expect(
+    labeledInputs[0].querySelector('.iui-input-label')?.textContent,
+  ).toEqual('From');
+  expect(
+    labeledInputs[1].querySelector('.iui-input-label')?.textContent,
+  ).toEqual('To');
 
   screen.getByText('Filter');
   screen.getByText('Clear');
@@ -51,7 +49,7 @@ it('should render correctly with set filter value', () => {
   });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-grid input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -64,7 +62,7 @@ it('should set filter when both values entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-grid input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -81,7 +79,7 @@ it('should set filter when only From is entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-grid input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -97,7 +95,7 @@ it('should set filter when only To is entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-grid input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -113,7 +111,7 @@ it('should set filter when both values entered and Enter is pressed', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-grid input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
@@ -133,7 +131,7 @@ it('should set filter with empty values when invalid number is entered', () => {
   const { container } = renderComponent({ setFilter });
 
   const labeledInputs = container.querySelectorAll(
-    '.iui-input-container.iui-inline-label input',
+    '.iui-input-grid input',
   ) as NodeListOf<HTMLInputElement>;
   expect(labeledInputs.length).toBe(2);
 
diff --git a/packages/itwinui-react/src/core/Textarea/Textarea.tsx b/packages/itwinui-react/src/core/Textarea/Textarea.tsx
index 9fb41877e41..932d9bbae46 100644
--- a/packages/itwinui-react/src/core/Textarea/Textarea.tsx
+++ b/packages/itwinui-react/src/core/Textarea/Textarea.tsx
@@ -2,10 +2,16 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import * as React from 'react';
-import { useMergedRefs, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Input } from '../Input/index.js';
+
+export type TextareaProps = {
+  /**
+   * Status of textarea.
+   */
+  status?: 'positive' | 'warning' | 'negative';
+};
 
 /**
  * Basic textarea component
@@ -13,21 +19,8 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  * <Textarea placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export const Textarea = React.forwardRef((props, ref) => {
-  const { className, rows = 3, ...rest } = props;
-
-  const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
-  const refs = useMergedRefs<HTMLTextAreaElement>(ref, textAreaRef);
-
-  return (
-    <Box
-      as='textarea'
-      className={cx('iui-input', className)}
-      rows={rows}
-      ref={refs}
-      {...rest}
-    />
-  );
-}) as PolymorphicForwardRefComponent<'textarea'>;
+export const Textarea = React.forwardRef((props, forwardedRef) => {
+  return <Input as='textarea' rows={3} ref={forwardedRef} {...props} />;
+}) as PolymorphicForwardRefComponent<'textarea', TextareaProps>;
 
 export default Textarea;
diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx
index 4f05071a6eb..74aee6bb00b 100644
--- a/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx
+++ b/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx
@@ -155,9 +155,7 @@ it('should render custom transfer list with label and toolbar', () => {
       </TransferList.ListboxWrapper>
     </TransferList>,
   );
-  const listBoxLabel = container.querySelector(
-    '.iui-transfer-list-listbox-label',
-  );
+  const listBoxLabel = container.querySelector('.iui-input-label');
   expect(listBoxLabel).toBeTruthy();
   expect(listBoxLabel).toHaveTextContent('Label');
 
diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.tsx
index 2987b23f78c..e8ea24350dd 100644
--- a/packages/itwinui-react/src/core/TransferList/TransferList.tsx
+++ b/packages/itwinui-react/src/core/TransferList/TransferList.tsx
@@ -14,6 +14,7 @@ import {
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { List, ListItem } from '../List/index.js';
+import { Label } from '../Label/index.js';
 
 // ----------------------------------------------------------------------------
 // TransferListComponent
@@ -193,7 +194,7 @@ type TransferListListboxLabelOwnProps = {
 };
 
 const TransferListListboxLabel = React.forwardRef((props, ref) => {
-  const { children, className, id, ...rest } = props;
+  const { children, id, ...rest } = props;
 
   const { labelId, setLabelId } = useSafeContext(TransferListContext);
 
@@ -204,15 +205,9 @@ const TransferListListboxLabel = React.forwardRef((props, ref) => {
   }, [id, labelId, setLabelId]);
 
   return (
-    <Box
-      as='div'
-      className={cx('iui-transfer-list-listbox-label', className)}
-      id={labelId}
-      ref={ref}
-      {...rest}
-    >
+    <Label as='div' id={labelId} ref={ref} {...rest}>
       {children}
-    </Box>
+    </Label>
   );
 }) as PolymorphicForwardRefComponent<'div', TransferListListboxLabelOwnProps>;
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts
index c9124c59cf6..68d4ff49f19 100644
--- a/packages/itwinui-react/src/core/index.ts
+++ b/packages/itwinui-react/src/core/index.ts
@@ -87,6 +87,10 @@ export {
 
 export { Input } from './Input/index.js';
 
+export { InputWithDecorations } from './InputWithDecorations/InputWithDecorations.js';
+
+export { InputGrid } from './InputGrid/InputGrid.js';
+
 export { Label } from './Label/index.js';
 
 export { LabeledInput } from './LabeledInput/index.js';
diff --git a/packages/itwinui-react/src/core/utils/components/Icon.test.tsx b/packages/itwinui-react/src/core/utils/components/Icon.test.tsx
index d60155ee6a1..e09f268cec4 100644
--- a/packages/itwinui-react/src/core/utils/components/Icon.test.tsx
+++ b/packages/itwinui-react/src/core/utils/components/Icon.test.tsx
@@ -13,6 +13,7 @@ it('should render in its most basic state', () => {
   expect(icon).toHaveClass('iui-svg-icon');
   expect(icon).toHaveAttribute('data-iui-icon-size', 'm');
   expect(icon).toHaveAttribute('data-iui-icon-color', 'default');
+  expect(icon).not.toHaveAttribute('data-iui-padded', 'true');
 });
 
 it.each(['auto', 'small', 'medium', 'large'] as const)(
@@ -70,3 +71,9 @@ it('should allow arbitrary sizes and fills', () => {
   expect(icon).toHaveAttribute('data-iui-icon-size', '26.2px');
   expect(icon).toHaveAttribute('data-iui-icon-color', 'hotpink');
 });
+
+it('should render padded icon', () => {
+  render(<Icon padded>icon</Icon>);
+  const icon = screen.getByText('icon');
+  expect(icon).toHaveAttribute('data-iui-padded', 'true');
+});
diff --git a/packages/itwinui-react/src/core/utils/components/Icon.tsx b/packages/itwinui-react/src/core/utils/components/Icon.tsx
index f7c32577f2f..7c5b31da366 100644
--- a/packages/itwinui-react/src/core/utils/components/Icon.tsx
+++ b/packages/itwinui-react/src/core/utils/components/Icon.tsx
@@ -37,6 +37,11 @@ export type IconProps = {
     | 'negative'
     | 'warning'
     | AnyString;
+  /**
+   * Option to add padding to the icon.
+   * @default false
+   */
+  padded?: boolean;
 } & React.ComponentPropsWithoutRef<'span'>;
 
 const getSizeValue = (size: string) => {
@@ -67,7 +72,13 @@ const getSizeValue = (size: string) => {
  * </Icon>
  */
 export const Icon = React.forwardRef((props, ref) => {
-  const { size = 'medium', fill = 'default', className, ...rest } = props;
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
 
   return (
     <Box
@@ -75,6 +86,7 @@ export const Icon = React.forwardRef((props, ref) => {
       className={cx('iui-svg-icon', className)}
       data-iui-icon-size={getSizeValue(size)}
       data-iui-icon-color={fill}
+      data-iui-padded={padded ? 'true' : undefined}
       ref={ref}
       {...rest}
     />
diff --git a/packages/itwinui-react/src/core/utils/components/InputContainer.tsx b/packages/itwinui-react/src/core/utils/components/InputContainer.tsx
index 426875f4050..d28fc8e31bc 100644
--- a/packages/itwinui-react/src/core/utils/components/InputContainer.tsx
+++ b/packages/itwinui-react/src/core/utils/components/InputContainer.tsx
@@ -5,6 +5,8 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
+import { Label } from '../../Label/index.js';
+import { StatusMessage } from '../../StatusMessage/index.js';
 
 export type InputContainerProps<T extends React.ElementType = 'div'> = {
   as?: T;
@@ -15,7 +17,6 @@ export type InputContainerProps<T extends React.ElementType = 'div'> = {
   message?: React.ReactNode;
   icon?: JSX.Element;
   isLabelInline?: boolean;
-  isIconInline?: boolean;
   statusMessage?: React.ReactNode;
   inputId?: string;
   labelId?: string;
@@ -36,7 +37,6 @@ export const InputContainer = <T extends React.ElementType = 'div'>(
     message,
     icon,
     isLabelInline,
-    isIconInline,
     children,
     className,
     style,
@@ -48,48 +48,31 @@ export const InputContainer = <T extends React.ElementType = 'div'>(
 
   return (
     <Box
-      className={cx(
-        'iui-input-container',
-        {
-          'iui-disabled': disabled,
-          [`iui-${status}`]: !!status,
-          'iui-inline-label': isLabelInline,
-          'iui-inline-icon': isIconInline,
-          'iui-with-message':
-            (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        },
-        className,
-      )}
+      className={cx('iui-input-grid', className)}
+      data-iui-status={status}
+      data-iui-label-placement={isLabelInline ? 'inline' : undefined}
       style={style}
       {...rest}
     >
       {label && (
-        <Box
+        <Label
           as={inputId && props.as !== 'label' ? 'label' : 'div'}
-          className={cx('iui-label', {
-            'iui-required': required,
-          })}
+          required={required}
+          disabled={disabled}
           htmlFor={inputId}
           id={labelId}
         >
           {label}
-        </Box>
+        </Label>
       )}
       {children}
-      {statusMessage ? (
-        statusMessage
-      ) : (
-        <>
-          {icon && (
-            <Box as='span' className='iui-input-icon' aria-hidden>
-              {icon}
-            </Box>
-          )}
-          {message && !isLabelInline && (
-            <Box className='iui-message'>{message}</Box>
+      {statusMessage
+        ? statusMessage
+        : message && (
+            <StatusMessage startIcon={icon} status={status}>
+              {message}
+            </StatusMessage>
           )}
-        </>
-      )}
     </Box>
   );
 };
diff --git a/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx b/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx
index d8135d18221..e3a4b5f74d2 100644
--- a/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx
+++ b/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx
@@ -10,6 +10,7 @@ import { Box } from './Box.js';
 export type InputFlexContainerProps = {
   isDisabled?: boolean;
   status?: 'positive' | 'warning' | 'negative';
+  size?: 'small' | 'large';
 };
 
 /**
@@ -17,12 +18,14 @@ export type InputFlexContainerProps = {
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, style, ...rest } = props;
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
 
   return (
     <Box
       className={cx('iui-input-flex-container', className)}
       data-iui-status={status}
+      data-iui-size={size}
       data-iui-disabled={isDisabled ? 'true' : undefined}
       ref={ref}
       style={style}