Input Text

CInputText is an extension to standard input element with theming.

Basic Usage

CInputText is used with the v-model property for two-way value binding.

<template>
  <CInputText
      v-model="value"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Filled

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<template>
  <CInputText 
      v-model="value" 
      variant="filled" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Sizes

CInputText provides small and large sizes as alternatives to the base.

<template>
    <div class="card flex flex-col items-center gap-4">
        <CInputText 
            v-model="value1" 
            type="text" 
            size="small" 
            placeholder="Small" 
        />
        <CInputText 
            v-model="value2" 
            type="text" 
            placeholder="Normal" 
        />
        <CInputText 
            v-model="value3" 
            type="text"
            size="large"
            placeholder="Large" 
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CInputText 
      v-model="value" 
      :invalid="!value" 
      placeholder="Name" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
  <CInputText 
      v-model="value" 
      disabled 
      placeholder="Disabled" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>