pages._explore-components-interaction-formstateindicator.title

pages._explore.sections.basic-usage.title

Form State Indicator

html

<FormStateIndicator
    identifier="example-form"
    eager-validation
/>

typescript

<script setup lang="ts">
// The FormStateIndicator connects to a form with the matching identifier
// Make sure a Form component with identifier="example-form" exists
</script>

pages._explore.sections.complex-usage.title

html

<div class="flex items-center gap-2">
  <FormStateIndicator identifier="complex-form" />
  <FormActionButton identifier="complex-form" />
</div>

typescript

<script setup lang="ts">
// The FormStateIndicator works alongside other form components
// It shows the current state of the form with visual indicators:
// - IDLE: Solid circle (primary color)
// - ACTION_IN_PROGRESS: Spinning outline circle (primary color, opacity 60%)
// - CLEAN: Outline circle (primary color, opacity 60%) 
// - DIRTY: Outline circle (warning color, opacity 60%)
// - ERROR: Solid circle (error color)
</script>

pages._explore.sections.states.title

IDLE/PROCESSED - Form ready (hover for tooltip)

DIRTY - Form has validation issues

ACTION_IN_PROGRESS - Form is being processed (spinning)

ERROR - Form has validation errors

html

<!-- Form states visualization -->
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2">
    <FormStateIndicator
      :state="FormStateOptions.IDLE"
      identifier="idle-demo" />
    <Text
      :translate="false"
      text="IDLE/SAVED - Form ready (hover for tooltip)" />
  </div>
  
  <div class="flex items-center gap-2">
    <FormStateIndicator
      :state="FormStateOptions.DIRTY"
      identifier="dirty-demo" />
    <Text
      :translate="false"
      text="DIRTY - Form has unsaved changes" />
  </div>
  
  <div class="flex items-center gap-2">
    <FormStateIndicator
      :state="FormStateOptions.ACTION_IN_PROGRESS"
      identifier="processing-demo" />
    <Text
      :translate="false"
      text="ACTION_IN_PROGRESS - Form is being saved (spinning)" />
  </div>
  
  <div class="flex items-center gap-2">
    <FormStateIndicator
      :state="FormStateOptions.ERROR"
      identifier="error-demo" />
    <Text
      :translate="false"
      text="ERROR - Form has validation errors" />
  </div>
</div>

typescript

<script setup lang="ts">
import { FormStateOptions } from '#core-types/components/interaction/form'

// Note: Form states are managed by the useForm() composable
// The indicator automatically reflects the current state of each form
// Hover over each indicator to see the tooltip with state description
</script>

pages._explore.sections.props.title

Prop	Default	Type
identifier	''	string

pages._explore.sections.types.title

Name	Type	Options
FormStateOptions	enum	IDLE \| ACTION_TO_BE_TRIGGERED \| DIRTY \| CLEAN \| ACTION_IN_PROGRESS \| ERROR