Migrating from ghl-ui Form to HighRise Form

HighRise uses HLForm and HLFormItem with HighRise sizing defaults. Use this guide to align props and usage.

Component Implementation Changes

Import Changes

- import { UIForm, UIFormItem } from '@gohighlevel/ghl-ui'
+ import { HLForm, HLFormItem } from '@platform-ui/highrise'

Basic Usage Changes

- <UIForm :model="formModel" :rules="rules" ref="formRef">
-   <UIFormItem label="Name" path="name" required>
-     <UIInput v-model="formModel.name" />
-   </UIFormItem>
-   <UIFormItem>
-     <UIButton @click="submit">Submit</UIButton>
-   </UIFormItem>
- </UIForm>
+ <HLForm :model="formModel" :rules="rules" ref="formRef" size="md">
+   <HLFormItem label="Name" path="name" required :show-feedback="true">
+     <HLInput v-model:value="formModel.name" />
+   </HLFormItem>
+   <HLFormItem>
+     <HLButton @click="submit">Submit</HLButton>
+   </HLFormItem>
+ </HLForm>

Props Changes

HLForm

ghl-ui Prop	HighRise Prop	Notes
model	model	Same usage.
rules	rules	Same usage.
show-label	showLabel	optional
show-require-mark	showRequireMark	Optional.
inline	inline	Same semantics.
label-placement	labelPlacement	'top' or 'left'.
label-width	labelWidth	Number/string.
label-align	labelAlign	'left' or 'right'.
size	size	sm | md (default) | lg; controls item gap and child size mapping.
require-mark-placement	requireMarkPlacement	'left' or 'right'.
validate-messages	validateMessages	Custom validation messages.
disabled	disabled	Disables the form.
show-feedback	showFeedback	Toggle feedback visibility.

HLFormItem

ghl-ui Prop / Slot	HighRise Prop	Notes
label	label or #label slot	Slot still supported; label prop simplest.
path	path	Same usage for validation.
rule	rule	Single-item rule override.
show-label	showLabel	Boolean; defaults to parent behavior.
show-feedback	showFeedback	Boolean; inherits when undefined.
required	required	Marks the field required.
feedback	feedback / #feedback slot	Custom feedback text or slot content.
validation-status	validationStatus	'error' | 'warning' | 'success'.
tooltip slot	tooltip prop	Pass FormItemTooltipProps for inline tooltip icon/content.
label-props	labelProps	Forward extra props to label element.

Examples

Form with Validation

<template>
  <HLForm :model="form" :rules="rules" ref="formRef" size="md">
    <HLFormItem label="Email" path="email" required>
      <HLInput v-model:value="form.email" />
    </HLFormItem>
    <HLFormItem label="Country" path="country" required>
      <HLSelect id="country" v-model:value="form.country" :options="countryOptions" />
    </HLFormItem>
    <HLFormItem>
      <HLButton type="primary" @click="handleSubmit">Submit</HLButton>
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({ email: '', country: '' })
const countryOptions = [
  { label: 'United States', value: 'US' },
  { label: 'Canada', value: 'CA' },
]
const rules = {
  email: [{ required: true, message: 'Email is required', trigger: 'blur' }],
  country: [{ required: true, message: 'Country is required', trigger: 'change' }],
}
const handleSubmit = async () => {
  const valid = await formRef.value?.validate?.()
  if (valid) {
    // submit
  }
}
</script>

Best Practices

1. Choose size to match the enclosing UI (defaults to md).
2. Provide path on every HLFormItem when using rules.
3. Use tooltip prop instead of label slots for inline help icons.
4. Surface validation feedback through showFeedback and feedback/validationStatus when you have custom validation flows.