Input

Input renders a native input with Akaza state attributes and Field integration.

It preserves native text editing, validation, and form behavior.

Anatomy

• ui.root: Native <input> element. Direct class also applies here.

Input has one structural part and does not wrap the native element.

Usage

<script setup lang="ts">
import { Input } from "akaza-ui";
</script>

<template>
  <Input placeholder="Project name" />
</template>

Examples

Field integration

Inside Field, the input inherits id, name, required, disabled, invalid state, and aria-describedby.

<template>
  <Field name="email" label="Email" description="Used for account notices." required>
    <Input type="email" placeholder="you@example.com" />
  </Field>
</template>

Native validation

Use native input attributes when browser validation already covers the rule. Native invalid attributes are revealed after user input, blur, or a browser invalid event, so a required empty input does not render as invalid on page load. The explicit invalid prop still marks the input invalid immediately.

<template>
  <Input
    type="text"
    name="slug"
    required
    pattern="[a-z0-9-]+"
    minlength="3"
    placeholder="project-slug"
  />
</template>

Cancel a value change

Use details.cancel() to reject a model update before it lands.

<script setup lang="ts">
import type { AkazaChangeEventDetails } from "akaza-ui";
import { ref } from "vue";

const value = ref("");

function onlyLowercase(next: string, details: AkazaChangeEventDetails) {
  if (next !== next.toLowerCase()) details.cancel();
}
</script>

<template>
  <Input v-model="value" @value-change="onlyLowercase" />
</template>

Disabled and readonly

Use disabled for unavailable fields and readonly for values users can copy but not edit.

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

const locked = ref("Locked");
const readOnly = ref("Read only");
</script>

<template>
  <Input v-model="locked" disabled />
  <Input v-model="readOnly" readonly />
</template>

State styling

Use data attributes in ui.root for focused, invalid, dirty, and filled states.

<template>
  <Input
    :ui="{
      root: 'border px-3 py-2 data-[akaza-invalid=true]:border-red-500 data-[akaza-focused=true]:outline',
    }"
  />
</template>

Canceled edits and reset

Calling details.cancel() in value-change restores the accepted native input value as well as suppressing the model update. Rejected text is not left in FormData. Native reset restores the mount-time value and clears touched/invalid state only when the reset event is not canceled.

API Reference

Props

Emits

UI Options

State Attributes

Input sets data-valid, data-invalid, data-dirty, data-touched, data-filled, data-focused, and data-disabled, plus matching data-akaza-* attributes.

Native data-akaza-invalid appears after interaction or invalid submit. Controlled invalid state from the invalid prop or parent Field appears immediately.

Styling Hooks

Plain class also applies to the native input root. ui.root is the structured equivalent.

Keyboard

Input preserves native keyboard behavior for its type, inputmode, autocomplete, selection, clipboard, and form submission. Akaza does not replace browser text editing shortcuts. Enter submits an owning form when native HTML rules permit it.