Text Input

The go-to component for collecting short text from users -- names, emails, search queries, and more. It handles labels, validation, prefix/suffix decorations, and can even stretch into a textarea when you need longer content.

import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';

Basic Usage

Wire up a text input with v-model and wrap it in a CoarFormField to add a label, placeholder, and optional hint to guide the user.

Username

Choose a unique username

Value: empty

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
    <CoarFormField label="Username" hint="Choose a unique username">
      <CoarTextInput
        v-model="value"
        placeholder="Enter your username"
      />
    </CoarFormField>
    <span style="font-size: 13px; color: #64748b;">Value: {{ value || 'empty' }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';

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

Validation States

Add required to both CoarFormField (for the asterisk) and the input (for the HTML attribute). Pass an error string to CoarFormField to surface validation feedback beneath the input.

Required field

Please enter a valid email address

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
    <CoarFormField label="Email" hint="Required field" required>
      <CoarTextInput
        v-model="email"
        placeholder="your@email.com"
        :required="true"
      />
    </CoarFormField>
    <CoarFormField label="Email" error="Please enter a valid email address">
      <CoarTextInput
        value="invalid-email"
      />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';

const email = ref('');
</script>

Disabled & Readonly

Use disabled when the field should be completely non-interactive, and readonly when users should be able to see and copy the value but not change it.

Disabled

Readonly

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
    <CoarFormField label="Disabled">
      <CoarTextInput value="Cannot edit" :disabled="true" />
    </CoarFormField>
    <CoarFormField label="Readonly">
      <CoarTextInput value="View only" :readonly="true" />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';
</script>

Prefix & Suffix

Prefix and suffix slots help users understand the expected format -- think currency symbols, units, or domain names.

Website

https://

Price

EUR

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
    <CoarFormField label="Website">
      <CoarTextInput v-model="website" placeholder="example.com" prefix="https://" />
    </CoarFormField>
    <CoarFormField label="Price">
      <CoarTextInput v-model="price" placeholder="0.00" suffix="EUR" />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';

const website = ref('');
const price = ref('');
</script>

Clear Button

When clearable is enabled (the default), a small X button appears on hover or focus so users can quickly reset the field.

Value: empty

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
    <CoarFormField label="Search">
      <CoarTextInput
        v-model="search"
        placeholder="Type to search..."
        :clearable="true"
      />
    </CoarFormField>
    <span style="font-size: 13px; color: #64748b;">Value: {{ search || 'empty' }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';

const search = ref('');
</script>

Sizes

Four sizes let you match the input to its surroundings -- compact toolbars, standard forms, or spacious layouts.

Extra Small

Small

Medium

Large

vue

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;">
    <CoarFormField label="Extra Small">
      <CoarTextInput size="xs" placeholder="27px" />
    </CoarFormField>
    <CoarFormField label="Small">
      <CoarTextInput size="s" placeholder="32px" />
    </CoarFormField>
    <CoarFormField label="Medium">
      <CoarTextInput size="m" placeholder="40px" />
    </CoarFormField>
    <CoarFormField label="Large">
      <CoarTextInput size="l" placeholder="48px" />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';
</script>

Multiline (Textarea)

Set rows to 2 or more and the input switches to a textarea, perfect for descriptions, notes, or any free-form content.

Bio

Max 500 characters

6 Rows

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
    <CoarFormField label="Bio" hint="Max 500 characters">
      <CoarTextInput
        v-model="bio"
        placeholder="Tell us about yourself..."
        :rows="4"
      />
    </CoarFormField>
    <CoarFormField label="6 Rows">
      <CoarTextInput :rows="6" placeholder="Taller textarea..." />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarTextInput, CoarFormField } from '@cocoar/vue-ui';

const bio = ref('');
</script>

Accessibility

Key	Action
`Tab`	Move focus to input
`Shift + Tab`	Move focus backward
`Escape`	Clear input (when clearable)

INFO

Labels are automatically associated with their inputs. The required asterisk is announced by screen readers.

Label text announces on focus
Required state properly communicated
Error messages are linked via aria-describedby
Hint text is accessible to assistive technology

API

Props

Prop	Type	Default	Description
`v-model`	`string`	`''`	Current input value (two-way binding)
`placeholder`	`string`	`''`	Placeholder text when empty
`prefix`	`string`	`''`	Prefix text before the input
`suffix`	`string`	`''`	Suffix text after the input
`size`	`'xs' \| 's' \| 'm' \| 'l'`	`'m'`	Input size
`rows`	`number`	`1`	Rows >= 2 enables textarea mode
`clearable`	`boolean`	`true`	Show clear button when input has value
`error`	`boolean`	`false`	Error state (auto-injected from `CoarFormField`)
`disabled`	`boolean`	`false`	Disable the input
`readonly`	`boolean`	`false`	Make read-only
`required`	`boolean`	`false`	HTML required attribute

TIP

Label, hint, and error are provided by CoarFormField. Wrap inputs in a CoarFormField to add these features.

i18n Keys

These keys can be translated via @cocoar/vue-localization.

Key	Default (English)	Used as
`coar.ui.textInput.clear`	`'Clear'`	Clear button `aria-label`

Text Input ​

Basic Usage ​

Validation States ​

Disabled & Readonly ​

Prefix & Suffix ​

Clear Button ​

Sizes ​

Multiline (Textarea) ​

Accessibility ​

Keyboard Navigation ​

Screen Reader Support ​

API ​

Props ​

i18n Keys ​