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` -