Input

LhInput is a form input component based on the native input element, supporting text input, password, character count, and more.

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/input/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize


export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps


export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean

  prefixIcon?: LhIconName

  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string

  themeVars?: Record<string, string>

  bgPattern?: string

  sx?: LhSxProps
}

LhIconName _{(from @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Basic Usage

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInput } from '@lh-ui/vue3'

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

<template>
  <LhInput v-model="value" placeholder="Please input" />
</template>

vue

<script>
import { LhInput } from '@lh-ui/vue3'

export default {
  components: { LhInput },
  data() {
    return {
      value: '',
    }
  },
}
</script>

<template>
  <LhInput v-model="value" placeholder="Please input" />
</template>

Types

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInput } from '@lh-ui/vue3'

const text = ref('')
const password = ref('')
</script>

<template>
  <LhInput v-model="text" placeholder="Text input" />
  <LhInput v-model="password" type="password" show-password placeholder="Password" />
</template>

vue

<script>
import { LhInput } from '@lh-ui/vue3'

export default {
  components: { LhInput },
  data() {
    return {
      text: '',
      password: '',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="Text input" />
  <LhInput v-model="password" type="password" show-password placeholder="Password" />
</template>

Disabled

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInput } from '@lh-ui/vue3'

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

<template>
  <LhInput v-model="value" disabled placeholder="Disabled" />
</template>

vue

<script>
import { LhInput } from '@lh-ui/vue3'

export default {
  components: { LhInput },
  data() {
    return {
      value: '',
    }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="Disabled" />
</template>

Word Limit

0/50

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInput } from '@lh-ui/vue3'

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

<template>
  <LhInput v-model="value2" :maxlength="50" show-word-limit placeholder="Max 50 characters" />
</template>

vue

<script>
import { LhInput } from '@lh-ui/vue3'

export default {
  components: { LhInput },
  data() {
    return {
      value2: '',
    }
  },
}
</script>

<template>
  <LhInput v-model="value2" :maxlength="50" show-word-limit placeholder="Max 50 characters" />
</template>

sx Quick Layout

Use the sx prop to quickly set spacing and sizing, without writing extra CSS.

vue

<script setup lang="ts">
import { LhInput } from '@lh-ui/vue3'
</script>

<template>
  <LhInput placeholder="Vertical margin 1, horizontal padding 2" :sx="{ my: 1, px: 2 }" />
</template>

vue

<script>
import { LhInput } from '@lh-ui/vue3'

export default {
  components: { LhInput },
}
</script>

<template>
  <LhInput placeholder="Vertical margin 1, horizontal padding 2" :sx="{ my: 1, px: 2 }" />
</template>

sx is scaled on an 8px base: my: 1 → marginTop/marginBottom: 8px, px: 2 → paddingLeft/Right: 16px. See sx Quick Layout for the full API.

Slots

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInput } from '@lh-ui/vue3'

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

<template>
  <LhInput v-model="value3">
    <template #prefix>{{ '$' }}</template>
  </LhInput>
  <LhInput v-model="value3">
    <template #suffix>unit</template>
  </LhInput>
</template>

vue

<script>
import { LhInput } from '@lh-ui/vue3'

export default {
  components: { LhInput },
  data() {
    return {
      value3: '',
    }
  },
}
</script>

<template>
  <LhInput v-model="value3">
    <template #prefix>{{ '$' }}</template>
  </LhInput>
  <LhInput v-model="value3">
    <template #suffix>unit</template>
  </LhInput>
</template>

Sizes & Readonly

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Readonly input" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Readonly input" />
</template>

Clearable

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" clearable placeholder="Enter and clear" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" clearable placeholder="Enter and clear" />
</template>

Prefix & Suffix Icons

prefix-icon / suffix-icon set the prefix/suffix icons, taking a built-in LhIcon name such as search or date.

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Prefix icon" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Suffix icon" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Prefix icon" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Suffix icon" />
</template>

Native Attributes & Autosize

Native attributes such as autocomplete, native-type, autofocus and minlength are passed through to the inner input; autosize makes a textarea adapt its height to the content.

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Autofocus" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Autosize" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Autofocus" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Autosize" />
</template>

Props

Prop	Description	Type	Default
modelValue	Bound value	`string`	—
type	Input type	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	Disabled state	`boolean`	`false`
readonly	—	`boolean`	`false`
placeholder	Placeholder text	`string`	—
maxlength	Maximum length	`number`	—
minlength	—	`number`	—
showWordLimit	Show character count	`boolean`	`false`
clearable	Show clear button	`boolean`	`false`
prefixIcon	Prefix icon name (a built-in LhIcon name)	`LhIconName`	—
suffixIcon	Suffix icon name (a built-in LhIcon name)	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	Component-level theme variables, overrides ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Component-level background pattern, overrides ConfigProvider	`string`	—
sx	sx quick-layout props	`LhSxProps`	—

Events

Event	Description	Callback
update:modelValue	Value change	`(value: string) => void`
change	Input change	`(value: string) => void`
input	Input event	`(value: string) => void`
focus	Focus event	`(e: FocusEvent) => void`
blur	Blur event	`(e: FocusEvent) => void`
clear	Clear clicked	`() => void`
keydown	Native keydown event	`(e: KeyboardEvent) => void`

Slots

Slot	Description
prefix	Prefix content
suffix	Suffix content

Input ​

Type Definitions ​

Basic Usage ​

Types ​

Disabled ​

Word Limit ​

sx Quick Layout ​

Slots ​

Sizes & Readonly ​

Clearable ​

Prefix & Suffix Icons ​

Native Attributes & Autosize ​

Props ​

Events ​

Slots ​

Input

Type Definitions

Basic Usage

Types

Disabled

Word Limit

sx Quick Layout

Slots

Sizes & Readonly

Clearable

Prefix & Suffix Icons

Native Attributes & Autosize

Props

Events

Slots