Text Input

Display a text input element.

Usage

The CCTextInput component wraps an input, the input element it will inherit all attributes except class, where class is applied to the wrapper div.

<script setup lang="ts">
const text = ref('')
</script>

<template>
  <CTextInput
    v-model="text"
    label="Example"
    placeholder="Type example text"
    subtle
  />
</template>

Errors

The errors prop will take an array of strings and render them as errors.

  • Example error
<template>
<CTextInput :errors="['Example error']" placeholder="Type example text" label="Example" />
</template>

Hint

Must contain at least 8 characters
<template>
<CTextInput placeholder="Type example text" label="Example" hint="Must contain at least 8 characters" :errors="[]" />
</template>

Loading

<template>
<CTextInput loading class="min-w-50" placeholder="Type example text" label="Example" />
</template>

Disabled

<template>
<CTextInput disabled placeholder="Type example text" label="Example" />
</template>

Props

type
InputTypeHTMLAttribute
"text"
"number""reset""submit""text""button""checkbox""color""date""datetime-local""email""file""hidden""image""month""password""radio""range""search""tel""time""url""week"
variant
"subtle" | "outlined"
"subtle"
id
string
label
string
name
string
errors
string[]
modelValue
any
hint
string
required
boolean
disabled
boolean
readonly
boolean
loading
boolean