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

Prop Default Type
id string
label string
name string
type'text' "number" | "reset" | "submit" | "text" | "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "password" | "radio" | "range" | "search" | "tel" | "time" | "url" | "week" | string & {}
errors string[]
modelValueany
requiredboolean
disabledboolean
readonlyboolean
loadingboolean
hint string
variant'subtle' "subtle" | "outlined"