Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Form

Structured form wrapper for collecting and validating user input. Use x-form to group fields, run validation, and handle submit in one place.

#
Usage

Basic example with common props.

Edit user information

Almost all fields are required

Group of checkboxes
Group of radio buttons
Phone number

Select a country code and enter your local number

#API

Form

props

Name
Description
Type
Default
Values
Required
autoValidate
Runs validation on all registered fields before emitting submit.
Boolean
true
autoFocus
Focuses the first registered field when the form mounts.
Boolean
true
disabled
Disables all fields inside the form fieldset.
Boolean
false
errors
External field errors (`field` + `msg`) applied to registered inputs.
Array
Object
() => []
title
Optional title shown in the default header.
String
description
Optional description shown under the title in the default header.
String
hasFooter
Renders the footer slot area for form actions.
Boolean
true

slots

Name
Description
default
Form fields and content inside the fieldset.
header
Custom header; overrides the default title/description block.
footer
Custom footer; wraps primary and secondary actions by default.
primary-action
Primary action control in the default footer.
secondary-action
Secondary action control in the default footer.

emits

Name
Description
submit
Emitted on form submit with whether validation passed.

methods

Name
Description
validate
Validate all registered fields; focuses the first invalid field.
submit
Programmatically submit the form (runs auto-validate when enabled).
checkbox
formGroup