diff --git a/packages/pharos/src/components/combobox/PharosCombobox.react.stories.tsx b/packages/pharos/src/components/combobox/PharosCombobox.react.stories.tsx
index 4ff3e78c8..8a5fd665f 100644
--- a/packages/pharos/src/components/combobox/PharosCombobox.react.stories.tsx
+++ b/packages/pharos/src/components/combobox/PharosCombobox.react.stories.tsx
@@ -40,6 +40,7 @@ export const Base: Story = {
style={{ display: 'grid', gridTemplateColumns: '300px' }}
validated={args.validated}
value={args.value}
+ inline={args.inline}
>
{args.label}
diff --git a/packages/pharos/src/components/combobox/pharos-combobox.scss b/packages/pharos/src/components/combobox/pharos-combobox.scss
index c6358f3d1..2a3a03802 100644
--- a/packages/pharos/src/components/combobox/pharos-combobox.scss
+++ b/packages/pharos/src/components/combobox/pharos-combobox.scss
@@ -10,6 +10,17 @@
width: 100%;
}
+.combobox-wrapper {
+ display: flex;
+ align-items: center;
+ gap: var(--pharos-spacing-1-x);
+}
+
+label[for='input-element'].input-label--inline {
+ flex-shrink: 0;
+ margin-bottom: 0;
+}
+
.combobox__icon {
fill: var(--pharos-combobox-color-icon-dropdown);
}
diff --git a/packages/pharos/src/components/combobox/pharos-combobox.ts b/packages/pharos/src/components/combobox/pharos-combobox.ts
index b15b5ea7c..eee5a7b10 100644
--- a/packages/pharos/src/components/combobox/pharos-combobox.ts
+++ b/packages/pharos/src/components/combobox/pharos-combobox.ts
@@ -74,6 +74,13 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
@property({ type: Boolean, reflect: true, attribute: 'loose-match' })
public looseMatch = false;
+ /**
+ * Indicates if the label should be positioned inline with the input.
+ * @attr inline
+ */
+ @property({ type: Boolean, reflect: true })
+ public inline = false;
+
/**
* The list of options available in the combobox dropdown list
* @readonly
@@ -458,8 +465,8 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
}
protected override render(): TemplateResult {
- return html`
-