Build serious forms
without wiring
every field.

<script setup>
import { Form } from '@inertiaui/form-vue'

defineProps(['form'])
</script>

<template>
  <Form :form="form" />
</template>

import { Form } from '@inertiaui/form-react'

export default function Onboarding({ form }) {
  return <Form form={form} />
}

class StarRating extends Field
{
    use HasLabel;
    use HasValidationRules;

    protected int $maxStars = 5;

    public function maxStars(int $max): static
    {
        $this->maxStars = $max;

        return $this;
    }

    public function getComponent(): string
    {
        return 'StarRating';
    }

    public function toArray(): array
    {
        return array_merge(parent::toArray(), [
            'label' => $this->getLabel(),
            'maxStars' => $this->maxStars,
        ]);
    }
}

<script setup>
import { FieldWrapper, useFormField } from '@inertiaui/form-vue'

const props = defineProps(['name', 'label', 'maxStars'])

const { value, setValue, error, inputId } = useFormField(props)
</script>

<template>
  <FieldWrapper :field="props" :error="error" :input-id="inputId">
    <button
      v-for="star in props.maxStars"
      :key="star"
      type="button"
      @click="setValue(star)"
      v-text="star <= (value ?? 0) ? '★' : '☆'"
    />
  </FieldWrapper>
</template>

class ReviewForm extends Form
{
    public function fields(): array
    {
        return [
            TextInput::make('headline')->required(),

            StarRating::make('rating')
                ->maxStars(5)
                ->required(),

            Submit::make('Publish review'),
        ];
    }
}