Accessibility: Full

Translations: Not Needed

Text Input

Basic Usage

Basic text input with two-way binding and placeholder text.

Enter text...

vue

<template>
  <HLInput v-model:modelValue="value" placeholder="Enter text..." />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

All Sizes

Available size variants from largest (lg) to smallest (3xs).

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" size="lg" placeholder="Large input" />
  <HLInput v-model:modelValue="value" size="md" placeholder="Medium input" />
  <HLInput v-model:modelValue="value" size="sm" placeholder="Small input" />
  <HLInput v-model:modelValue="value" size="xs" placeholder="Extra small input" />
  <HLInput v-model:modelValue="value" size="2xs" placeholder="2x Extra small input" />
  <HLInput v-model:modelValue="value" size="3xs" placeholder="3x Extra small input" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Text Align

Control text alignment within the input field.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" text-align="start" placeholder="Left aligned" />
  <HLInput v-model:modelValue="value" text-align="center" placeholder="Center aligned" />
  <HLInput v-model:modelValue="value" text-align="end" placeholder="Right aligned" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Prefix

Add content before the input text.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value">
    <template #prefix>$</template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Suffix

Add content after the input text.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value">
    <template #suffix>$</template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Disabled state

Input field in disabled state, preventing user interaction.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" disabled />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Readonly state

Input field in readonly state, allowing only text selection.

vue

<template>
  <HLInput v-model:modelValue="value" readonly />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('sample text')
</script>

Auto size

Input that automatically adjusts its width based on content.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" autosize />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Clearable

Input with a clear button to reset its value.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" clearable />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Password

Secure input field for password entry with toggle visibility.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" type="password" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Loading

Input field with loading indicator.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" loading />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Character Limit

Input with maximum character limit enforcement.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" :maxlength="10" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Count characters

Input displaying current character count.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" showCount />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Character Limit with Count

Input with both character limit and count display.

Please Input

0 / 10

vue

<template>
  <HLInput v-model:modelValue="value" :maxlength="10" showCount />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Leading icon

Input with an icon at the start.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value" :prefixIcon="Mail01Icon" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'
import { Mail01Icon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
</script>

Payment input

Input with credit card logo prefix for payment forms.

Please Input

vue

<template>
  <HLInput v-model:modelValue="value">
    <template #prefix>
      <div class="flex items-center" :style="{ width: '40px', height: '40px' }">
        <img
          src="https://download.logo.wine/logo/Mastercard/Mastercard-Logo.wine.png"
          alt="credit card"
          class="w-full h-full object-contain"
        />
      </div>
    </template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Leading text

Input with text prefix for URL or similar inputs.

https://

Please Input

vue

<template>
  <HLInput v-model:modelValue="value">
    <template #prefix>https://</template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'

const value = ref('')
</script>

Trailing button

Input with an action button appended.

Please Input

vue

<template>
  <HLInputGroup>
    <HLInput v-model:modelValue="value" />
    <HLButton :size="24" variant="secondary">
      <HLIcon style="margin-right:4px;fill:var(--gray-700)" :size="20">
        <Copy05Icon style="color:var(--gray-700);stroke-width: 2.5;" />
      </HLIcon>
      <HLText :size="20" weight="semibold">Copy</HLText>
    </HLButton>
  </HLInputGroup>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput, HLInputGroup, HLButton, HLText } from '@platform-ui/highrise'
import { Copy05Icon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
</script>

Input with a dropdown menu at the start.

Option 1

Please Input

vue

<template>
  <HLInput v-model:modelValue="inputValue">
    <template #prefix>
      <HLDropdown @update:show="showDropdown" :disabled="false" :size="24" :options="options" @select="selectedValue">
        <div class="flex items-center">
          <span size="xs">{{ value }}</span>
          <HLIcon
            :style="{
              transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
              transition: 'all 0.3s',
              marginLeft: '4px',
            }"
            :size="24"
          >
            <ChevronDownIcon />
          </HLIcon>
        </div>
      </HLDropdown>
    </template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput, HLDropdown, HLIcon } from '@platform-ui/highrise'
import { ChevronDownIcon } from '@gohighlevel/ghl-icons/24/outline'

const inputValue = ref('')
const value = ref('Option 1')
const isDropdownOpen = ref(false)

const options = [
  { key: 'option1', label: 'Option 1' },
  { key: 'option2', label: 'Option 2' },
  { key: 'option3', label: 'Option 3' },
  { key: 'option4', label: 'Option 4' },
]

const selectedValue = temp => {
  value.value = temp.label
}

const showDropdown = val => {
  isDropdownOpen.value = val
}
</script>

Input with a dropdown menu at the end.

Please Input

Option 1

vue

<template>
  <HLInput v-model:modelValue="inputValue" :suffix-icon="HelpCircleIcon" suffix-icon-tooltip-content="Help">
    <template #suffix>
      <HLDropdown @update:show="showDropdown" :disabled="false" :size="24" :options="options" @select="selectedValue">
        <div class="flex items-center">
          <span size="xs">{{ value }}</span>
          <HLIcon
            :style="{
              transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
              transition: 'all 0.3s',
              marginLeft: '4px',
            }"
            :size="24"
          >
            <ChevronDownIcon />
          </HLIcon>
        </div>
      </HLDropdown>
    </template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput, HLDropdown, HLIcon } from '@platform-ui/highrise'
import { ChevronDownIcon, HelpCircleIcon } from '@gohighlevel/ghl-icons/24/outline'

const inputValue = ref('')
const value = ref('Option 1')
const isDropdownOpen = ref(false)

const options = [
  { key: 'option1', label: 'Option 1' },
  { key: 'option2', label: 'Option 2' },
  { key: 'option3', label: 'Option 3' },
  { key: 'option4', label: 'Option 4' },
]

const selectedValue = temp => {
  value.value = temp.label
}

const showDropdown = val => {
  isDropdownOpen.value = val
}
</script>

Inline Input

Minimalist input that appears as text until focused.

Click to edit...

With prefix icon...

With suffix icon and tooltip...

Disabled inline input...

vue

<template>
  <!-- Basic inline input -->
  <HLInput v-model:modelValue="value" inline placeholder="Click to edit..." :showInlineBottomBorder="false" />

  <!-- With prefix icon -->
  <HLInput v-model:modelValue="value" inline :prefix-icon="Mail01Icon" placeholder="With prefix icon..." :showInlineBottomBorder="false" />

  <!-- With suffix icon and tooltip -->
  <HLInput
    v-model:modelValue="value"
    inline
    :suffix-icon="HelpCircleIcon"
    suffix-icon-tooltip-content="This is a help tooltip"
    placeholder="With suffix icon and tooltip..."
    :showInlineBottomBorder="false"
  />

  <!-- Disabled state -->
  <HLInput v-model:modelValue="value" inline disabled placeholder="Disabled inline input..." :showInlineBottomBorder="false" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'
import { Mail01Icon, HelpCircleIcon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
</script>

Inline Editing with CTA Buttons

Inline input with confirm and cancel actions for explicit user control.

Click to edit with confirm/cancel...

With bottom border...

With prefix icon...

vue

<template>
  <!-- Basic inline input with confirm/cancel CTAs -->
  <HLInput
    v-model:modelValue="value"
    inline
    showInlineCTA
    placeholder="Click to edit with confirm/cancel..."
    :showInlineBottomBorder="false"
  />

  <!-- With bottom border -->
  <HLInput v-model:modelValue="value" inline showInlineCTA placeholder="With bottom border..." />

  <!-- With prefix icon -->
  <HLInput
    v-model:modelValue="value"
    inline
    showInlineCTA
    :prefix-icon="Mail01Icon"
    placeholder="With prefix icon..."
    :showInlineBottomBorder="false"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'
import { Mail01Icon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
</script>

Inline Input with Form Validation

Inline input integrated with form validation and error states.

Username *

Enter username...

vue

<template>
  <HLFormItem label="Username" required validation-status="error">
    <HLInput v-model:modelValue="value" placeholder="Enter username..." inline />
  </HLFormItem>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput, HLFormItem } from '@platform-ui/highrise'

const value = ref('')
</script>

Event Testing

This example shows how to test various input events. Try the following:

Type text and click the clear icon (×) to test the @clear event
Select text in the input to test the @select event
Type a long text to make the input scrollable and scroll to test the @scroll event
Focus and blur the input to test the respective events
Type text to see the @update:modelValue event

Test events here...

Event Log:

No events logged yet. Try the actions above.

Vue

html

<script setup>
  const eventLog = ref([])
  const addEventLog = event => {
    eventLog.value.unshift({ event, timestamp: new Date().toLocaleTimeString() })
    // Keep only last 5 events
    if (eventLog.value.length > 5) {
      eventLog.value.pop()
    }
  }
</script>

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    placeholder="Test events here..."
    clearable
    @clear="addEventLog('Clear event triggered')"
    @select="addEventLog('Select event triggered')"
    @scroll="addEventLog('Scroll event triggered')"
    @focus="addEventLog('Focus event triggered')"
    @blur="addEventLog('Blur event triggered')"
    @update:modelValue="addEventLog(`Value updated: ${$event}`)"
  />
  <div class="text-sm">
    <p class="font-bold mb-2">Event Log:</p>
    <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Try the actions above.</div>
    <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">{{ log.timestamp }}: {{ log.event }}</div>
  </div>
</template>

Imports

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

Props

Name	Type	Default	Description
id *	`string \| undefined`	`undefined`	The `id` of the element
modelValue	`string`	`''`	The value of the input
type	`'text' \| 'textarea' \| 'password' \| 'tel' \| 'email' \| 'url'`	`'text'`	The type of the input
readonly	`boolean`	`false`	If true, the input is read-only
rows	`number`	`3`	Number of rows for textarea
clearable	`boolean`	`false`	If true, a clear button is shown
size	`'lg' \| 'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs'`	`'sm'`	The size of the input
placeholder	`string \| undefined`	`undefined`	Placeholder text for the input
autosize	`boolean \| AutosizeConfig \| undefined`	`undefined`	If true, the textarea auto-resizes
maxlength	`number \| undefined`	`undefined`	Maximum number of characters allowed
minlength	`number \| undefined`	`undefined`	Minimum number of characters required
loading	`boolean \| undefined`	`undefined`	If true, a loading indicator is shown
showCount	`boolean \| undefined`	`undefined`	If true, character count is shown
disabled	`boolean \| undefined`	`undefined`	If true, the input is disabled
inputProps	`Object`	`undefined`	Additional properties for the input element
showPasswordOn	`'mousedown' \| undefined \| 'click'`	`undefined`	Event to show the password in password input
prefixIcon	`string \| undefined`	`undefined`	src of the image to render
suffixIcon	`string \| undefined`	`undefined`	src of the image to render
suffixIconTooltipContent	`string \| undefined`	`undefined`	Tooltip content of suffix icon
textAlign	`'start' \| 'center' \| 'end'`	`start`	Text,Placeholder alignment of the input

Inline Input Props

Prop	Type	Default	Description
`inline`	`boolean`	`false`	Transforms the input into an inline editable field that blends with surrounding content until activated
`showInlineCTA`	`boolean`	`false`	Adds confirm (✓) and cancel (×) buttons that appear during editing, requiring explicit user action to save or discard changes
`showInlineBottomBorder`	`boolean`	`true`	Controls the visibility of the bottom border in inline mode - useful for matching different design contexts

Types

// Configuration for auto-sizing textarea
interface AutosizeConfig {
  minRows?: number
  maxRows?: number
}

Type Details

AutosizeConfig

minRows: Minimum number of rows for textarea
maxRows: Maximum number of rows for textarea

Emits

Name	Default	Trigger
`@onBlur`	`(): void`	When the input is blurred
`@update:modelValue`	`(value: string \| [string, string]) => void`	When the input value changes
`@change`	`(value: string) => void`	When native change event is fired
`@focus`	`(FocusEvent) => void`	When the input is focused
`@blur`	`(FocusEvent) => void`	When the input is blurred

Slots

Name	Parameters	Description
default	`()`	The default content slot
prefix	`()`	Prefix content slot
suffix	`()`	Suffix content slot

Methods

Method	Type	Description
`focus()`	`() => void`	Focuses the input
`blur()`	`() => void`	Blurs the input
`select()`	`() => void`	Selects the input
`scrollTo(value: number)`	`(value: number) => void`	Scrolls the input to a specific position

Text Input ​

Basic Usage ​

All Sizes ​

Text Align ​

Prefix ​

Suffix ​

Disabled state ​

Readonly state ​

Auto size ​

Clearable ​

Password ​

Loading ​

Character Limit ​

Count characters ​

Character Limit with Count ​

Leading icon ​

Payment input ​

Leading text ​

Trailing button ​

Leading dropdown ​

Trailing dropdown ​

Inline Input ​

Inline Editing with CTA Buttons ​

Inline Input with Form Validation ​

Event Testing ​

Imports ​

Props ​

Inline Input Props ​

Types ​

Type Details ​

AutosizeConfig ​

Emits ​

Slots ​

Methods ​

Text Input

Basic Usage

All Sizes

Text Align

Prefix

Suffix

Disabled state

Readonly state

Auto size

Clearable

Password

Loading

Character Limit

Count characters

Character Limit with Count

Leading icon

Payment input

Leading text

Trailing button

Leading dropdown

Trailing dropdown

Inline Input

Inline Editing with CTA Buttons

Inline Input with Form Validation

Event Testing

Imports

Props

Inline Input Props

Types

Type Details

AutosizeConfig

Emits

Slots

Methods