Form

Semantic form wrapper with submit handling, loading, and disabled states.

Live Demo

Basic

Name

Email

Message

Disabled

Name

Email

Usage

Basic

<template>
  <orio-form v-model="payload" @submit="onSubmit">
    <orio-input name="email" label="Email" type="email" />
    <orio-button type="submit">Submit</orio-button>
  </orio-form>
</template>

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

const payload = ref({
  email: "",
});

function onSubmit() {
  console.log("Submitted:", payload.value);
}
</script>

With Validation

<template>
  <orio-form v-model="payload" @submit="onSubmit">
    <orio-input name="email" label="Email" :error="errors.email" />
    <orio-button type="submit" :loading="isLoading">Submit</orio-button>
  </orio-form>
</template>

<script setup>
import { ref } from "vue";
import { useValidation, isFilled, isEmail } from "orio-ui";

const payload = ref({
  email: "",
});
const isLoading = ref(false);

const { checkValidity, errors } = useValidation([
  {
    model: () => payload.value.email,
    id: "email",
    validator: isFilled,
    message: "Email is required",
  },
  {
    model: () => payload.value.email,
    id: "email",
    validator: isEmail,
    message: "Invalid email",
  },
]);

function onSubmit() {
  if (!checkValidity()) return;
  isLoading.value = true;
  // ...
}
</script>

Loading & Disabled

<!-- Prevents interaction during async submission -->
<orio-form v-model="payload" :loading="isLoading" @submit="onSubmit">
  ...
</orio-form>

<!-- Fully disabled form -->
<orio-form v-model="payload" disabled>
  ...
</orio-form>

Props

Prop	Type	Default	Description
disabled	boolean	false	Disables all form interaction
loading	boolean	false	Prevents interaction during async work

Events

Event	Payload	Description
submit	-	Emitted on form submit (prevented when disabled/loading)

Slots

Slot	Description
default	Form content (inputs, buttons, etc.)