Fields

Form fields are specialized input components designed to work seamlessly with the IkForm component. All field components share a common structure, providing consistent validation, error handling, view mode support, and automatic form registration. Fields automatically integrate with form validation, unsaved changes tracking, and skeleton loading states.

Field structure

All field components in the UI kit follow a consistent structure based on the IkTextField component pattern. This ensures a uniform API and behavior across all form fields.

Every field component is built on top of the IkFormField component, which provides the common wrapper, label display, error handling, and integration with the parent IkForm. The IkFormField component handles all the shared functionality, while individual field components (like IkTextField, IkSelectField, etc.) provide the specific input logic and UI.

Field component anatomy

The IkFormField component provides a consistent structure for all form fields. Here's a complete example showing all the parts:

<template>
  <IkFormField
    label="Field label"
    required
    field_icon="user:regular"
    :errors="['This is field error message']"
    subtext="This is field subtext hint message."
  >
    <div style="height: 34px; border: 2px dashed var(--border-neutral-regular-default); padding: var(--s-3); color: var(--content-neutral-weak-default);">
      slot for input component
    </div>
  </IkFormField>
</template>
<script setup>
import { IkFormField } from '@ikol/ui-kit/components/IkForm';
</script>

Common features

Every field component includes:

• Validation Support: Built-in validation with rules prop and error display
• View Mode: Display fields in read-only mode using view_mode prop

Common props

All field components share these common props:

• label (string, default: ''): Field label displayed above the input
• required (boolean, default: false): Marks the field as required (shows asterisk)
• rules (Array<Function>, default: []): Validation rules array. Each function receives the value and should return true or an error message string
• view_mode (boolean | string, default: 'inherit'): Display field in read-only mode. Use true to force view mode, false to force edit mode, or 'inherit' to use form's view_mode
• variant (string, default: undefined): Field variant. If not set, inherits from parent form
• subtext (string, default: undefined): Helper text displayed below the field
• field_icon (string, default: undefined): Icon displayed before the field content
• and more props...

Common methods

All field components expose these methods via template refs:

• validate(): Validate the field and return true if valid, false otherwise
• resetValidation(): Clear validation errors

Available field components

The UI kit provides the following field components, each designed for specific input types:

• IkTextField: Wraps IkInput component. Standard text input field supporting various input types (text, email, password, number, etc.)
• IkTextareaField: Wraps IkTextarea component. Multi-line text input for longer text content
• IkSelectField: Wraps IkSelect component. Dropdown select field with support for single or multiple selection, filtering, and custom item rendering
• IkCheckboxField: Wraps IkCheckbox component. Checkbox field with support for basic checkbox or switch variant
• IkRadioGroupField: Wraps IkRadioGroup component. Radio button group field for selecting one option from multiple choices
• IkDateField: Wraps IkDate component. Date picker field for selecting dates
• IkChipInputField: Wraps IkChipInput component. Field for entering multiple values as chips/tags

Each field component extends the base field structure with additional props and features specific to its input type. Refer to individual component documentation for field-specific features and usage examples.