Skip to content
Aihio v2.3.0
Search
GitHub
Search Describe what you are building, or name a component, intent, or token. Components and patterns are ranked the way the MCP server's find tool ranks them for an agent.

Pattern inline-form-validation

Inline Form With Validation

A compact form that keeps the invalid field, its message, and the corrective action in one place.

Uses aihio-stack aihio-field aihio-input aihio-alert aihio-cluster aihio-button

Intents layout form-field text-entry alert primary-action secondary-action

Pattern

Live, over the markup an agent gets from the MCP server's get_pattern. Narrow the preview to see the layout answer to its own width rather than the window's.

Inline Form With Validation

Full Tablet Phone
At least 12 characters, including one symbol. Password must include at least 12 characters and one symbol.
Password is too weak
Update the field above, then resubmit the form.
 Cancel Save password
Show code · 26 lines 
<form data-aihio-intent="form-field">
  <aihio-stack data-aihio-intent="layout">
    <aihio-field data-aihio-intent="form-field">
      <label slot="label">Password</label>
      <aihio-input
        data-aihio-intent="text-entry"
        type="password"
        name="password"
        autocomplete="new-password"
        required></aihio-input>
      <span slot="description">At least 12 characters, including one symbol.</span>
      <span slot="error">Password must include at least 12 characters and one symbol.</span>
    </aihio-field>

    <aihio-alert data-aihio-intent="alert" variant="destructive">
      <div slot="title">Password is too weak</div>
      <div slot="description">Update the field above, then resubmit the form.</div>
    </aihio-alert>

    <aihio-cluster data-aihio-intent="layout" grow justify="end">
      <aihio-button data-aihio-intent="secondary-action" variant="outline" type="reset">Cancel</aihio-button>
      <aihio-button data-aihio-intent="primary-action" type="submit">Save password</aihio-button>
    </aihio-cluster>
  </aihio-stack>
</form>

Variations

Other shapes of the same pattern, each as lint-clean as the first.

Success

Resolved state after the invalid field has been corrected.

Full Tablet Phone
Password strength looks good.
Password accepted
You can submit the form without additional changes.
 Cancel Save password
Show code · 26 lines 
<form data-aihio-intent="form-field">
  <aihio-stack data-aihio-intent="layout">
    <aihio-field data-aihio-intent="form-field">
      <label slot="label">Password</label>
      <aihio-input
        data-aihio-intent="text-entry"
        type="password"
        name="password"
        autocomplete="new-password"
        value="correct horse battery staple"
        required></aihio-input>
      <span slot="description">Password strength looks good.</span>
    </aihio-field>

    <aihio-alert data-aihio-intent="informational status" variant="success">
      <div slot="title">Password accepted</div>
      <div slot="description">You can submit the form without additional changes.</div>
    </aihio-alert>

    <aihio-cluster data-aihio-intent="layout" grow justify="end">
      <aihio-button data-aihio-intent="secondary-action" variant="outline" type="reset">Cancel</aihio-button>
      <aihio-button data-aihio-intent="primary-action" type="submit">Save password</aihio-button>
    </aihio-cluster>
  </aihio-stack>
</form>