Field

Field links a label, description, error message, and a control. Akaza inputs inside it inherit accessibility props and report focused, filled, dirty, touched, valid, and invalid state attributes.

Use it around one form control when you want labels, help text, errors, and native validity to stay wired without manual ids.

Anatomy

• #default: Control slot. Receives state and controlProps for custom/native controls.
• #label: Custom label content.
• #description: Custom help text included in aria-describedby.
• #error: Custom validation or server error content included in aria-describedby.

Akaza form controls consume Field context automatically. For native or custom controls, use the default slot's controlProps.

Usage

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

<template>
  <Field label="Email" description="Used for notifications.">
    <Input type="email" />
  </Field>
</template>

Examples

Required field

Use required on Field so the child Akaza input inherits native required state.

<template>
  <Field
    name="username"
    label="Username"
    description="Used in your public profile."
    required
  >
    <Input />
  </Field>
</template>

Error message

Pass error when you want the field to show a controlled validation message. Explicit error props and matching Form errors render immediately and mark the field invalid, so pass them only when your UI should show the error.

<template>
  <Field
    name="email"
    label="Email"
    error="Enter a valid email address."
  >
    <Input type="email" invalid />
  </Field>
</template>

Native validation errors

Use error-match to show the browser validation message only for a matching validity state. Akaza inputs reveal native invalid state after the user changes/blurs the control or the browser fires an invalid event; required empty fields do not show errors on first render.

<template>
  <Field
    name="email"
    label="Email"
    error-match="typeMismatch"
  >
    <Input type="email" required />
  </Field>
</template>

Custom control

Pass controlProps to native controls so ids, names, required state, disabled state, invalid state, and descriptions stay linked.

<template>
  <Field v-slot="{ controlProps }" name="bio" label="Bio">
    <textarea v-bind="controlProps" />
  </Field>
</template>

Scoped state

Use scoped state to render custom status text or styling beside the control.

<template>
  <Field v-slot="{ invalid, focused }" label="Project" name="project">
    <Input />
    <span>{{ focused ? "Editing" : invalid ? "Needs attention" : "Ready" }}</span>
  </Field>
</template>

API Reference

Props

Slots

UI Options

Styling Hooks

Granular field attrs are data-valid, data-invalid, data-dirty, data-touched, data-filled, data-focused, data-disabled, plus matching data-akaza-* attributes.