Input

Examples

Size variants

Available size variants of the ui prop: xs / s / m / l.

<template>
<article>
  <section>
    <veui-input
      ui="l"
      value="Large"
    />
  </section>
  <section><veui-input value="Normal"/></section>
  <section>
    <veui-input
      ui="s"
      value="Small"
    />
  </section>
  <section>
    <veui-input
      ui="xs"
      value="Extra small"
    />
  </section>
</article>
</template>

<script>
import { Input } from 'veui'

export default {
  components: {
    'veui-input': Input
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Read-only

Set the readonly prop to make the input field readonly.

Read-only

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      Read-only
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-input
        :readonly="readonly"
        ui="l"
        value="Large"
      />
    </section>
    <section>
      <veui-input
        :readonly="readonly"
        value="Normal"
      />
    </section>
    <section>
      <veui-input
        :readonly="readonly"
        ui="s"
        value="Small"
      />
    </section>
    <section>
      <veui-input
        :readonly="readonly"
        ui="xs"
        value="Extra small"
      />
    </section>
  </section>
</article>
</template>

<script>
import { Input, Checkbox } from 'veui'

export default {
  components: {
    'veui-input': Input,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      readonly: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Disabled

Set the disabled prop to disable the input field.

Disabled

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-input
        :disabled="disabled"
        ui="l"
        value="Large"
      />
    </section>
    <section>
      <veui-input
        :disabled="disabled"
        value="Normal"
      />
    </section>
    <section>
      <veui-input
        :disabled="disabled"
        ui="s"
        value="Small"
      />
    </section>
    <section>
      <veui-input
        :disabled="disabled"
        ui="xs"
        value="Extra small"
      />
    </section>
  </section>
</article>
</template>

<script>
import { Input, Checkbox } from 'veui'

export default {
  components: {
    'veui-input': Input,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Composition

Set the composition prop to handle input composition.

Composition

Input value:

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="composition">
      Composition
    </veui-checkbox>
  </section>
  <section>Input value: {{ value }}</section>
  <section>
    <veui-input
      v-model="value"
      :composition="composition"
    />
  </section>
</article>
</template>

<script>
import { Input, Checkbox } from 'veui'

export default {
  components: {
    'veui-input': Input,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      composition: true,
      value: ''
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Trimming white spaces

Set the trim prop to automatically remove leading and trailing white spaces from user input.

Input value: ``

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <p class="respect-whitespace">Input value: `{{ value }}`</p>
    <veui-input
      v-model="value"
      trim
    />
  </section>
</article>
</template>

<script>
import { Input } from 'veui'

export default {
  components: {
    'veui-input': Input
  },
  data () {
    return {
      composition: true,
      value: ''
    }
  }
}
</script>

<style scoped>
.respect-whitespace {
  white-space: pre;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.
`inline`	Inline style.

value

string

''

v-model

The value of the input field.

disabled boolean false Whether the input field is disabled.

readonly boolean false Whether the input field is read-only.

type

string

'text'

The type of input. See type in the native <input> element.

Value	Description
`text`	Text input field.
`password`	Password input field.
`hidden`	Hidden input field, but the value can be submitted.

placeholder string - Placeholder text for the input field.

clearable boolean false Whether to show the clear button.

composition boolean false Whether to handle input composition.

autofocus boolean false Whether to autofocus the input.

select-on-focus boolean false Whether to select the input field text on focus.

maxlength number - The maximum length of input characters.

get-length function(string): number - Custom function to calculate the length of input characters.

strict boolean false Whether to disallow input after maximum character limit is reached.

trim

boolean | string

false

Whether to trim leading and trailing white spaces. When set to true, leading and trailing white spaces will be removed. When set to false, they won't be removed. When set to a string, trimming will follow the specified method.

Value	Description
`both`	Remove both leading and trailing spaces. Equivalent to `true`.
`start`	Remove leading spaces.
`end`	Remove trailing spaces.

Slots

Name	Description
`before`	Content to be placed before the input field.
`after`	Content to be placed after the input field.
`placeholder`	Placeholder content when no value is entered.

Events

Name Description

change

Triggered when the content of the input changes, i.e. when the native change event is triggered. The callback parameters are (value, event).

Name	Type	Description
`value`	`string`	The value of the input.
`event`	`Event`	The native `change` event object.

input

v-model

Triggered when valid input is entered, affected by the composition prop. The callback parameter is (value: string), where value is the value of the input.

clear Triggered when the clear button is clicked.

In addition, Input supports the following native events:

auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, select, wheel, keydown, keypress, keyup, focus, blur, focusin, focusout.

The callback functions of these events receive the native event object as a parameter.

Icons

Name	Description
`remove`	Clear button.

Edit this page on GitHubEdit