Input

Demos

Size variants

Available size variants for 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 state

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

Read-only

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.

Disabled

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

Name Type Default Description

ui

string=

Style variants.

Value	Description
`xs`	Extra small.
`s`	Small.
`m`	Medium.
`l`	Large.

value

string

v-model

The value of the input.

disabled boolean= false Whether the input is disabled.

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

type

string=

'text'

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

Value	Description
`text`	Plain text input.
`password`	Password input.
`hidden`	Hidden input but holds a value to submit.

placeholder string= - The placeholder text of the input.

clearable boolean= false Whether to show a clear button.

composition boolean= false Whether the input process should be aware of composition.

select-on-focus boolean= false Whether to select text content when focused.

get-length function(string): number= Used to customize length calculation of the input.

trim

boolean | 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.

Value	Description
`both`	Trim from both ends. Equivalent to `true`.
`start`	Trim from the start.
`end`	Trim from the end.

Slots

Name	Description
`before`	The content before the input area inside the component.
`after`	The content after the input area inside the component.

Slots will squeeze the width of the input area.

Events

Name Description

change

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

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

input [^event-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

Name	Description
`remove`	Remove button.

Edit this page on GitHubEdit