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 auth-form

Auth Form

Card-based authentication form with labelled fields and a dominant submit action inside the form element.

Uses aihio-card aihio-field aihio-input aihio-cluster aihio-button

Intents surface layout form-field text-entry 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.

Auth Form

Full Tablet Phone
Sign in Use your work email and password to continue. Forgot password Sign in
Show code · 40 lines 
<aihio-card data-aihio-intent="surface">
  <form>
    <aihio-card-header>
      <aihio-card-title>Sign in</aihio-card-title>
      <aihio-card-description>Use your work email and password to continue.</aihio-card-description>
    </aihio-card-header>
    <aihio-card-content>
      <aihio-stack data-aihio-intent="layout">
        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Email</label>
          <aihio-input
            data-aihio-intent="text-entry"
            type="email"
            name="email"
            autocomplete="email"
            placeholder="you@example.com"
            required></aihio-input>
        </aihio-field>

        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Password</label>
          <aihio-input
            data-aihio-intent="text-entry"
            type="password"
            name="password"
            autocomplete="current-password"
            required></aihio-input>
        </aihio-field>
      </aihio-stack>
    </aihio-card-content>
    <aihio-card-footer>
      <aihio-cluster data-aihio-intent="layout" grow justify="end">
        <aihio-button data-aihio-intent="secondary-action" variant="outline">Forgot password</aihio-button>
        <aihio-button data-aihio-intent="primary-action" type="submit">Sign in</aihio-button>
      </aihio-cluster>
    </aihio-card-footer>
  </form>
</aihio-card>

Variations

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

Passwordless

Email-only sign-in flow that requests a magic link.

Full Tablet Phone
Email me a sign-in link We will send a one-time login link to your inbox. The link expires after 10 minutes. Use password instead Send magic link
Show code · 28 lines 
<aihio-card data-aihio-intent="surface">
  <form>
    <aihio-card-header>
      <aihio-card-title>Email me a sign-in link</aihio-card-title>
      <aihio-card-description>We will send a one-time login link to your inbox.</aihio-card-description>
    </aihio-card-header>
    <aihio-card-content>
      <aihio-field data-aihio-intent="form-field">
        <label slot="label">Email</label>
        <aihio-input
          data-aihio-intent="text-entry"
          type="email"
          name="email"
          autocomplete="email"
          placeholder="you@example.com"
          required></aihio-input>
        <span slot="description">The link expires after 10 minutes.</span>
      </aihio-field>
    </aihio-card-content>
    <aihio-card-footer>
      <aihio-cluster data-aihio-intent="layout" grow justify="end">
        <aihio-button data-aihio-intent="secondary-action" variant="outline">Use password instead</aihio-button>
        <aihio-button data-aihio-intent="primary-action" type="submit">Send magic link</aihio-button>
      </aihio-cluster>
    </aihio-card-footer>
  </form>
</aihio-card>

Sign Up

Account-creation variant with name, email, and password confirmation.

Full Tablet Phone
Create your account Set up a new workspace login for your team. At least 12 characters, including one symbol. Already have an account? Create account
Show code · 63 lines 
<aihio-card data-aihio-intent="surface">
  <form>
    <aihio-card-header>
      <aihio-card-title>Create your account</aihio-card-title>
      <aihio-card-description>Set up a new workspace login for your team.</aihio-card-description>
    </aihio-card-header>
    <aihio-card-content>
      <aihio-stack data-aihio-intent="layout">
        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Full name</label>
          <aihio-input
            data-aihio-intent="text-entry"
            name="name"
            autocomplete="name"
            placeholder="Jane Doe"
            required></aihio-input>
        </aihio-field>

        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Email</label>
          <aihio-input
            data-aihio-intent="text-entry"
            type="email"
            name="email"
            autocomplete="email"
            placeholder="jane@company.com"
            required></aihio-input>
        </aihio-field>

        <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>
        </aihio-field>

        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Confirm password</label>
          <aihio-input
            data-aihio-intent="text-entry"
            type="password"
            name="password_confirmation"
            autocomplete="new-password"
            required></aihio-input>
        </aihio-field>
      </aihio-stack>
    </aihio-card-content>
    <aihio-card-footer>
      <aihio-cluster data-aihio-intent="layout" grow justify="end">
        <aihio-button data-aihio-intent="secondary-action" variant="outline">Already have an account?</aihio-button>
        <aihio-button data-aihio-intent="primary-action" type="submit">Create account</aihio-button>
      </aihio-cluster>
    </aihio-card-footer>
  </form>
</aihio-card>