Input

Demos

Size variants

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

Edit this page on GitHubEdit
<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 state

Use the readonly prop to set an input to read-only state.

Edit this page 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 state

Use the disabled prop to set an input to disabled state.

Edit this page 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>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
xsExtra small.
sSmall.
mMedium.
lLarge.
valuestring''

v-model

The value of the input.

disabledboolean=falseWhether the input is disabled.
readonlyboolean=falseWhether the input is read-only.
typestring='text'

The type of the input. See the type attribute of HTML's native <input> element.

ValueDescription
textPlain text input.
passwordPassword input.
hiddenHidden input but holds a value to submit.
placeholderstring=-The placeholder text of the input.
clearableboolean=falseWhether to show a clear button.
compositionboolean=falseWhether the input process should be aware of composition.
select-on-focusboolean=falseWhether to select text content when focused.
get-lengthfunction(string): number=Used to customize length calculation of the input.
trimboolean | string=false

Wether to trim the input value. If set to true, the input value will be trimmed from both ends. If set to false, the input value will not be trimmed. If set to a string, the input value will be trimmed from the specified side.

ValueDescription
bothTrim from both ends. Equivalent to true.
startTrim from the start.
endTrim from the end.

Slots

NameDescription
beforeThe content before the input area inside the component.
afterThe content after the input area inside the component.

Events

NameDescription
change

Triggered when the input value is changed like the native change event. The callback parameter list is (value, event).

NameTypeDescription
valuestringThe value of the input.
eventEventNative change event object.
input

v-model

Triggered when inputting into the input. Affected by the composition prop. The callback parameter list is (value: string), where value is the current value of the input.

Additionally, Input exposes 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 parameter is the corresponding native event object for all events above.

Icons

NameDescription
removeRemove button.
Edit this page on GitHubEdit