Basic Usage

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-input
        v-model="inputValue"
        placeholder="Enter something"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        type="password"
        placeholder="Password input"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        rounded
        placeholder="Rounded input"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        disabled
        placeholder="Disabled input"
      />
    </div>
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Sizes

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-input
        v-model="inputValue"
        placeholder="xs input"
        size="xs"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        placeholder="sm input"
        size="sm"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        placeholder="md (default) input"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        placeholder="lg input"
        size="lg"
      />
    </div>
    <div>
      <c-input
        v-model="inputValue"
        placeholder="xl input"
        size="xl"
      />
    </div>
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Clearable

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <c-input
    v-model="inputValue"
    placeholder="Enter something"
    clearable
  />
</template>

Click to open/fold code

Open Vue Repl Editor

Prefix & Suffix

+234

@someone

<script setup>
import { matContactPhone, matDateRange } from '@quasar/extras/material-icons/index'
import { ref } from 'vue'

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

<template>
  <div class="c-row c-items-center c-gutter-x-lg">
    <div>
      <c-input
        v-model="value"
        placeholder="prefix and suffix"
      >
        <template #prefix>
          +234
        </template>
        <template #suffix>
          @someone
        </template>
      </c-input>
    </div>
    <div>
      <c-input
        v-model="value"
        placeholder="Suffix Icon"
        clearable
      >
        <template #prefix>
          <c-icon :content="matContactPhone" />
        </template>
        <template #suffix>
          <c-icon :content="matDateRange" />
        </template>
      </c-input>
    </div>
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Loading

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <div>
      <c-input
        v-model="value"
        loading
        placeholder="加载中..."
      />
    </div>
    <div>
      <c-input
        v-model="value"
        loading
        placeholder="加载中..."
      >
        <template #loading>
          <c-loading-bar color="cyan" />
        </template>
      </c-input>
    </div>
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

CInput API

Props

Slots

Events

modelValue

string | number

*

The input value. Can be used with v-model.

theme

CTheme

Default  'primary'

The theme color.

disabled

boolean

Default  false

Determine whether the input is disabled or not.

size

CSize

Default  'md'

The size of input.

placeholder

string

Default  ''

The input placeholder.

rounded

boolean

Default  false

Determine whether the input has a rounded border or not.

loading

boolean

Default  false

Determine whether the input is in loading status or not.

clearable

boolean

Default  false

Determine whether the input content can be cleared by a clear icon or not.

readonly

boolean

Default  false

Determine whether the input is readonly or not.

prefixDivider

boolean

Default  true

Determine whether to be a divider between the input content and the prefix or not.

suffixDivider

boolean

Default  true

Determine whether to be a divider between the input content and the suffix or not.

focused

boolean

Default  false

Determine the input is in focused status or not.

autoBlur

boolean

Default  true

Determine whether the input's focus status is controlled manual.

type

"text" | "password"

Default  'text'

The input type.

customColor

boolean

Default  false

Determine whether to disabled the default style trigger by hover and focus status or not.s

validateTrigger

"change" | "blur" | "focus" | "manual"

Default  'blur'

The trigger to emit the form context validation which current input is in.

clearValidateOnFocus

boolean

Default  true

Determine whether to clear the validate status when blur or not.