RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Select (Inline)

Compact, borderless select that reads as inline text until it is opened.

Inline mode is opt-in

This page documents the inline variant of HLSelect — the same component as the standard Select, rendered as compact borderless text instead of a bordered field. There is no separate component or import; you get this behavior by setting the inline prop to true. Every prop, event, and slot on the standard Select still applies here.

Default Inline

Renders the select as inline text with inline and a compact size="sm".

Please Select

Vue

<template>
  <HLSelect :options="options" :value="selectedValue" @update:value="handleChange" :inline="true" size="sm" />
</template>
<script setup lang="ts">
  import { HLSelect } from '@platform-ui/highrise'
  import { ref } from 'vue'
  import { options } from './options'

  const selectedValue = ref('')
  const handleChange = value => {
    selectedValue.value = value
  }
</script>

options.ts

export const options = [
  {
    type: 'group',
    label: 'Rubber Soul',
    key: 'Rubber Soul',
    children: [
      {
        label: 'Drive My Car',
        value: 'song1',
        description: 'Drive My Car.ogg',
        tagColor: 'blue',
      },
      {
        label: 'Norwegian Wood',
        value: 'song2',
        description: 'Norwegian Wood.ogg',
        tagColor: 'green',
      },
      // ... other songs
    ],
  },
  {
    type: 'group',
    label: 'Let It Be',
    key: 'Let It Be Album',
    children: [
      {
        label: 'Two Of Us',
        value: 'Two Of Us',
        tagColor: 'purple',
      },
      {
        label: 'Dig A Pony',
        value: 'Dig A Pony',
        description: 'Dig A Pony.avi',
        tagColor: 'orange',
      },
      // ... other songs
    ],
  },
]

Inline with CTA

Shows confirm/cancel actions inside the dropdown with showInlineCTA, driven by the update:show, handleConfirm, and handleCancel events.

Please Select

Vue

<template>
  <HLSelect
    :options="options"
    :value="selectedValue"
    @update:value="handleChange"
    :inline="true"
    :showInlineCTA="showInlineCTA"
    :show="show"
    :filterable="true"
    size="sm"
    @handleConfirm="handleConfirm"
    @handleCancel="handleCancel"
    @update:show="handleUpdateShow"
  />
</template>
<script setup lang="ts">
  import { HLSelect } from '@platform-ui/highrise'
  import { ref } from 'vue'
  import { options } from './options'

  const selectedValue = ref('')
  const show = ref(false)
  const showInlineCTA = ref(false)

  const handleChange = value => {
    selectedValue.value = value
  }
  const handleConfirm = () => {
    show.value = false
    showInlineCTA.value = false // Hide CTA only on confirm
  }
  const handleCancel = () => {
    selectedValue.value = null
    show.value = false
    showInlineCTA.value = false // Hide CTA only on cancel
  }
  const handleUpdateShow = value => {
    show.value = value
    showInlineCTA.value = true
  }
</script>

ts

const show = ref(false)
const showInlineCTA = ref(false)

const handleConfirm = () => {
  show.value = false
  showInlineCTA.value = false // Hide CTA only on confirm
}

const handleCancel = () => {
  selectedValue.value = null
  show.value = false
  showInlineCTA.value = false // Hide CTA only on cancel
}
const handleUpdateShow = value => {
  show.value = value
  showInlineCTA.value = true
}

Inline with Bottom Border

Adds an underline beneath the inline trigger with showInlineBottomBorder.

Please Select

Vue

<template>
  <HLSelect
    :options="options"
    :value="selectedValue"
    @update:value="handleChange"
    :inline="true"
    :showInlineBottomBorder="true"
    size="sm"
  />
</template>
<script setup lang="ts">
  import { HLSelect } from '@platform-ui/highrise'
  import { ref } from 'vue'
  import { options } from './options'

  const selectedValue = ref('')
  const handleChange = value => {
    selectedValue.value = value
  }
</script>

options.ts

export const options = [
  {
    type: 'group',
    label: 'Rubber Soul',
    key: 'Rubber Soul',
    children: [
      {
        label: 'Drive My Car',
        value: 'song1',
        description: 'Drive My Car.ogg',
        tagColor: 'blue',
      },
      {
        label: 'Norwegian Wood',
        value: 'song2',
        description: 'Norwegian Wood.ogg',
        tagColor: 'green',
      },
      // ... other songs
    ],
  },
  {
    type: 'group',
    label: 'Let It Be',
    key: 'Let It Be Album',
    children: [
      {
        label: 'Two Of Us',
        value: 'Two Of Us',
        tagColor: 'purple',
      },
      {
        label: 'Dig A Pony',
        value: 'Dig A Pony',
        description: 'Dig A Pony.avi',
        tagColor: 'orange',
      },
      // ... other songs
    ],
  },
]

Inline with edit actions

Adds custom icons to the inline trigger via the edit-actions slot and confirms edits through the exposed triggerSavedMark method.

Please Select

Vue

<template>
  <HLSelect
    ref="selectRef"
    :options="options"
    :value="selectedValue"
    @update:value="handleChange"
    :inline="true"
    :showInlineCTA="showInlineCTA"
    @handleConfirm="handleConfirm"
    @handleCancel="handleCancel"
    @update:show="handleUpdateShow"
    size="sm"
    id="select-inline-edit-actions"
  >
    <template #edit-actions>
      <HLIcon size="16" color="var(--success-600)"><PhoneIcon /></HLIcon>
      <HLIcon size="16"><Mail01Icon /></HLIcon>
    </template>
  </HLSelect>
</template>
<script setup lang="ts">
  import { HLSelect, HLIcon } from '@platform-ui/highrise'
  import { PhoneIcon, Mail01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'
  import { options } from './options'

  const selectRef = ref(null)
  const showInlineCTA = ref(false)
  const selectedValue = ref('')
  const handleChange = value => {
    selectedValue.value = value
  }
  const handleConfirm = () => {
    showInlineCTA.value = false
    selectRef.value?.triggerSavedMark()
  }
  const handleCancel = () => {
    selectedValue.value = null
    showInlineCTA.value = false
  }
  const handleUpdateShow = value => {
    showInlineCTA.value = value
    if (value) {
      showInlineCTA.value = true
    }
  }
</script>

options.ts

export const options = [
  {
    type: 'group',
    label: 'Rubber Soul',
    key: 'Rubber Soul',
    children: [
      {
        label: 'Drive My Car',
        value: 'song1',
        description: 'Drive My Car.ogg',
        tagColor: 'blue',
      },
      {
        label: 'Norwegian Wood',
        value: 'song2',
        description: 'Norwegian Wood.ogg',
        tagColor: 'green',
      },
      // ... other songs
    ],
  },
  {
    type: 'group',
    label: 'Let It Be',
    key: 'Let It Be Album',
    children: [
      {
        label: 'Two Of Us',
        value: 'Two Of Us',
        tagColor: 'purple',
      },
      {
        label: 'Dig A Pony',
        value: 'Dig A Pony',
        description: 'Dig A Pony.avi',
        tagColor: 'orange',
      },
      // ... other songs
    ],
  },
]

Rounded Tags

Renders selected tags with fully rounded corners using roundedTags.

Please Select

Vue

<template>
  <HLSelect
    :options="options"
    :value="selectedValue"
    @update:value="handleChange"
    :inline="true"
    :multiple="true"
    type="avatar"
    :filterable="true"
    :showSearchIcon="true"
    :roundedTags="true"
    size="sm"
  />
</template>
<script setup lang="ts">
  import { HLSelect } from '@platform-ui/highrise'
  import { ref } from 'vue'
  import { options } from './options'

  const selectedValue = ref('')
  const handleChange = value => {
    selectedValue.value = value
  }
</script>

options.ts

export const options = [
  {
    type: 'group',
    label: 'Rubber Soul',
    key: 'Rubber Soul',
    children: [
      {
        label: 'Drive My Car',
        value: 'song1',
        description: 'Drive My Car.ogg',
        tagColor: 'blue',
      },
      {
        label: 'Norwegian Wood',
        value: 'song2',
        description: 'Norwegian Wood.ogg',
        tagColor: 'green',
      },
      // ... other songs
    ],
  },
  {
    type: 'group',
    label: 'Let It Be',
    key: 'Let It Be Album',
    children: [
      {
        label: 'Two Of Us',
        value: 'Two Of Us',
        tagColor: 'purple',
      },
      {
        label: 'Dig A Pony',
        value: 'Dig A Pony',
        description: 'Dig A Pony.avi',
        tagColor: 'orange',
      },
      // ... other songs
    ],
  },
]

Disabled Inline Select

Blocks interaction with the inline trigger using disabled.

Please Select

Vue

<template>
  <HLSelect :options="options" :value="selectedValue" @update:value="handleChange" :inline="true" :disabled="true" size="sm" />
</template>
<script setup lang="ts">
  import { HLSelect } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const selectedValue = ref('')
  const handleChange = value => {
    selectedValue.value = value
  }
  const options = [
    {
      label: 'Option 1',
      value: 'option1',
    },
  ]
</script>

Error State

Surfaces validation errors by wrapping the inline select in an HLFormItem with validation-status="error".

Please Select

This field is required

Vue

<template>
  <HLFormItem validation-status="error" feedback="This field is required">
    <HLSelect
      :options="options"
      :value="selectedValue"
      @update:value="handleChange"
      :inline="true"
      :showInlineCTA="showInlineCTA"
      :show="show"
      :filterable="true"
      size="sm"
      @handleConfirm="handleConfirm"
      @handleCancel="handleCancel"
      @update:show="handleUpdateShow"
    />
  </HLFormItem>
</template>
<script setup lang="ts">
  import { HLSelect, HLFormItem } from '@platform-ui/highrise'
  import { ref } from 'vue'
  import { options } from './options'

  const selectedValue = ref('')
  const show = ref(false)
  const showInlineCTA = ref(false)

  const handleChange = value => {
    selectedValue.value = value
  }
  const handleConfirm = () => {
    show.value = false
    showInlineCTA.value = false
  }
  const handleCancel = () => {
    selectedValue.value = null
    show.value = false
    showInlineCTA.value = false
  }
  const handleUpdateShow = value => {
    show.value = value
    showInlineCTA.value = true
  }
</script>

options.ts

export const options = [
  {
    type: 'group',
    label: 'Rubber Soul',
    key: 'Rubber Soul',
    children: [
      {
        label: 'Drive My Car',
        value: 'song1',
        description: 'Drive My Car.ogg',
        tagColor: 'blue',
      },
      {
        label: 'Norwegian Wood',
        value: 'song2',
        description: 'Norwegian Wood.ogg',
        tagColor: 'green',
      },
      // ... other songs
    ],
  },
  {
    type: 'group',
    label: 'Let It Be',
    key: 'Let It Be Album',
    children: [
      {
        label: 'Two Of Us',
        value: 'Two Of Us',
        tagColor: 'purple',
      },
      {
        label: 'Dig A Pony',
        value: 'Dig A Pony',
        description: 'Dig A Pony.avi',
        tagColor: 'orange',
      },
      // ... other songs
    ],
  },
]

Accessibility

• Tie helper/error copy via aria-describedby, and expose loading states with aria-busy when fetching options.
• The trigger exposes combobox/listbox semantics (aria-expanded, aria-controls, aria-haspopup) automatically; pass ariaLabel or ariaLabelledby so screen readers announce intent consistently.
• Inline mode removes the visible border, so make sure the trigger still has an accessible name and a visible focus indicator.

Imports

import { HLSelect } from '@platform-ui/highrise'

Props

Inline Select Props

These props apply when using the select in inline mode (inline="true").

Prop	Type	Default	Description
inline	boolean	false	Use inline styling (compact, borderless)
showInlineBottomBorder	boolean	false	Show bottom border in inline mode
showInlineCTA	boolean	false	Show confirm/cancel buttons in inline mode

All other props are shared with the standard select — see Select → Props.

Emits

Inline mode adds confirm/cancel events on top of the standard select events.

Name	Parameters	Description
@handleConfirm	()	Emitted when the inline CTA confirm button is clicked
@handleCancel	()	Emitted when the inline CTA cancel button is clicked
@update:show	(show: boolean)	Emitted when the dropdown opens or closes — use it to toggle the CTA

See Select → Emits for the full event list.

Slots

Name	Description
edit-actions	Custom action icons rendered next to the inline trigger

See Select → Slots for the full slot list.

Methods

Name	Parameters	Returns	Description
triggerSavedMark	() => void	void	Flash the saved checkmark after confirming an edit