GkInput

Single-line input bound with v-model. When placed inside GkField, it receives aria-invalid and aria-describedby from the field error region (and from the optional character counter when visible).

When to use

Use for email, password, search, and other native input types. Pair with GkField for labels and validation messages.

Live Examples

Basic

Minimal GkField + GkInput with v-model.

Example

vue

<script setup lang="ts">
import { GkField, GkInput } from 'god-kit/vue'
import { ref } from 'vue'

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

<template>
  <GkField label="Example">
    <GkInput v-model="value" placeholder="Type here" />
  </GkField>
</template>

Best practice: Always wrap in GkField when you have a visible label so id and aria-describedby stay aligned.

Prefix & counter

Static prefix text and a character counter; persistent counter stays visible.

With prefix & counter

$

0 / 12

vue

<script setup lang="ts">
import { GkField, GkInput } from 'god-kit/vue'
import { ref } from 'vue'

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

<template>
  <GkField label="With prefix & counter">
    <GkInput
      v-model="amount"
      prefix="$"
      placeholder="0.00"
      :counter="12"
      persistent-counter
    />
  </GkField>
</template>

Best practice: Use v-model.trim on text-like types when you want blur-time trimming.

Readonly, suffix, and disabled search

Readonly input with suffix; disabled search with number + trim modifiers.

Readonly + suffix + trim/number

USD

Search (disabled)

vue

<script setup lang="ts">
import { GkField, GkInput } from 'god-kit/vue'
import { ref } from 'vue'

const review = ref('Readonly value')
const search = ref('42')
</script>

<template>
  <div class="gk-doc-stack">
    <GkField label="Readonly + suffix + trim/number">
      <GkInput v-model="review" readonly suffix="USD" />
    </GkField>
    <GkField label="Search (disabled)">
      <GkInput v-model.number.trim="search" type="search" disabled />
    </GkField>
  </div>
</template>

<style scoped>
.gk-doc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-4);
  max-width: 24rem;
}
</style>

Best practice: For standalone inputs, pass ariaLabel so the control has an accessible name.

API

Props

Prop	Type	Default	Description
modelValue	string | number	required	Bound value (use v-model)
id	string	—	Override id (else inherits from GkField)
name	string	—	name attribute
type	string	'text'	Input type
autocomplete	string	—	Autocomplete hint
placeholder	string	—	Placeholder text
disabled	boolean	false	Disabled state
readonly	boolean	false	Read-only
ariaLabel	string	—	Use when no visible label
autofocus	boolean	false	Focus the control on mount
prefix	string	—	Static text before the field
suffix	string	—	Static text after the field
counter	boolean | number | string	—	Show a character count; true = count only; number or numeric string = max (shown as n / max)
counterValue	number | (value: string) => number	—	Override the displayed count
persistentCounter	boolean	false	When true, the counter is always shown; otherwise only while focused
role	string	—	Passed to the native <input>
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	Visual control scale; omit to use GK_FORM_CONTROLS / global defaults (default md)

Root attributes (except class, which applies to the outer wrapper) are forwarded to the <input>.

Modifiers

Use Vue’s v-model modifiers on GkInput:

Modifier	Behavior
.trim	On blur, the value is trimmed (for text, search, password, tel, url).
.number	Coerces to a number when possible (empty string stays empty).

Events

Event	Payload	Description
update:modelValue	string | number	Emitted on input
update:focused	boolean	true on focus, false on blur

Slots

Slot	Props	Description
counter	{ count, max }	Replace the default counter text

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Prefer wrapping GkInput with GkField for label and error semantics.
• When used standalone, pass ariaLabel so the control has an accessible name.
• Use persistentCounter for always-visible limits in forms with strict input quotas.

Related

• Form control size — app, subtree, and form defaults
• GkField
• GkTextarea
• GkSelect