Input

Input is an unstyled native input. Use it alone, or place it inside Field to inherit id, name, required, disabled, invalid state, native validation messages, and aria-describedby.

Use it for text-like native input types when you want Akaza state attrs and Field integration without losing normal browser behavior.

Anatomy

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

Input intentionally has one structural part. It does not wrap the native element, so all native attributes and browser validation stay direct.

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>

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.