Input

Demos

Size variants

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

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

<script>
import { Input } from 'veui'

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

Read-only state

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

Read-only

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

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

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

Disabled state

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

Disabled

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

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

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

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.

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

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

Name	Description
`remove`	Remove button.