Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Work in progress

Input Group

Group multiple inputs together with various display options.

Default

https://www.

Please Input

.com

Vue

<template>
  <HLInputGroup id="input-group-basic" :size="size">
    <HLInputGroupLabel id="input-group-basic-label-1">https://www.</HLInputGroupLabel>
    <HLInput id="input-group-basic-input" v-model:model-value="value" />
    <HLInputGroupLabel id="input-group-basic-label-2">.com</HLInputGroupLabel>
  </HLInputGroup>
</template>

<script setup lang="ts">
  import { HLInputGroup, HLInputGroupLabel, HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref('')
  const size = ref('medium')
</script>

Dropdown with Input

Please Select

Please Input

Vue

<template>
  <HLInputGroup id="input-group-dropdown" style="max-width:400px">
    <HLSelect id="input-group-dropdown-select" :options="options"></HLSelect>
    <HLInput id="input-group-dropdown-input" v-model:model-value="value" />
  </HLInputGroup>
</template>
<script setup lang="ts">
  import { HLInputGroup, HLInput, HLSelect } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref('')
</script>

Input and Button

Please Input

Vue

<template>
  <HLInputGroup id="input-group-copy" v-bind="args" style="max-width:400px">
    <HLInput id="input-group-copy-input" v-model:model-value="value" />
    <HLButton id="input-group-copy-button" @click="onCopyClick"><Copy01Icon class="w-6" />&nbsp;Copy</HLButton>
  </HLInputGroup>
</template>
<script setup lang="ts">
  import { HLInputGroup, HLInput, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref('')
</script>

Input Group with Form Validation

Website URL

https://www.

Please Input

.com

Enter your website URL

Vue

<template>
  <HLForm>
    <HLFormItem id="input-group-form" label="Website URL" validation-status="error" feedback="Enter your website URL">
      <HLInputGroup id="input-group-form-basic">
        <HLInputGroupLabel id="input-group-form-label-1">https://www.</HLInputGroupLabel>
        <HLInput id="input-group-form-input" v-model:model-value="value" />
        <HLInputGroupLabel id="input-group-form-label-2">.com</HLInputGroupLabel>
      </HLInputGroup>
    </HLFormItem>
  </HLForm>
</template>
<script setup lang="ts">
  import { HLForm, HLFormItem, HLInputGroup, HLInputGroupLabel, HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref('')
</script>

Imports

import { HLInputGroup, HLInputGroupLabel } from '@platform-ui/highrise'

Props

HLInputGroup Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the input group
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'sm'	Size of the input group

HLInputGroupLabel Props

Name	Type	Default	Description
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	Inherits from parent	Size of the label. If not specified, inherits from parent input group

Slots

HLInputGroup Slots

Name	Parameters	Description
default	()	The default content slot. Can contain HLInput, HLSelect, HLButton, HLInputGroupLabel

HLInputGroupLabel Slots

Name	Parameters	Description
default	()	The default content slot for the label text