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 tabbed-settings

Tabbed Settings

A settings view split across tabs so related configuration stays grouped without overwhelming the page. Each panel is its own form with its own Save.

Uses aihio-tabs aihio-card aihio-field aihio-input aihio-switch aihio-button aihio-stack aihio-cluster

Intents tabs navigation layout surface form-field text-entry toggle-state primary-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.

Tabbed Settings

Full Tablet Phone
Profile Notifications Security
Profile Update how your name and email appear to the team. Save profile
Notifications Choose which updates should interrupt your day. A summary of open incidents every morning. Activity across every project, sent on Mondays. Save notifications
Security Rotate credentials and confirm recovery options. Used only if you lose access to your account. Save security settings
Show code · 88 lines 
<aihio-tabs data-aihio-intent="tabs navigation layout" value="profile">
  <aihio-tab-list>
    <aihio-tab value="profile">Profile</aihio-tab>
    <aihio-tab value="notifications">Notifications</aihio-tab>
    <aihio-tab value="security">Security</aihio-tab>
  </aihio-tab-list>

  <aihio-tab-panel value="profile">
    <aihio-card data-aihio-intent="surface">
      <form>
        <aihio-card-header>
          <aihio-card-title>Profile</aihio-card-title>
          <aihio-card-description>Update how your name and email appear to the 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" value="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" value="jane@company.com" 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="primary-action" type="submit">Save profile</aihio-button>
          </aihio-cluster>
        </aihio-card-footer>
      </form>
    </aihio-card>
  </aihio-tab-panel>

  <aihio-tab-panel value="notifications">
    <aihio-card data-aihio-intent="surface">
      <form>
        <aihio-card-header>
          <aihio-card-title>Notifications</aihio-card-title>
          <aihio-card-description>Choose which updates should interrupt your day.</aihio-card-description>
        </aihio-card-header>
        <aihio-card-content>
          <aihio-stack data-aihio-intent="layout" gap="lg">
            <aihio-field data-aihio-intent="form-field">
              <label slot="label">Incident digests</label>
              <aihio-switch data-aihio-intent="toggle-state" name="incident-digests" checked></aihio-switch>
              <span slot="description">A summary of open incidents every morning.</span>
            </aihio-field>
            <aihio-field data-aihio-intent="form-field">
              <label slot="label">Weekly summary</label>
              <aihio-switch data-aihio-intent="toggle-state" name="weekly-summary"></aihio-switch>
              <span slot="description">Activity across every project, sent on Mondays.</span>
            </aihio-field>
          </aihio-stack>
        </aihio-card-content>
        <aihio-card-footer>
          <aihio-cluster data-aihio-intent="layout" grow justify="end">
            <aihio-button data-aihio-intent="primary-action" type="submit">Save notifications</aihio-button>
          </aihio-cluster>
        </aihio-card-footer>
      </form>
    </aihio-card>
  </aihio-tab-panel>

  <aihio-tab-panel value="security">
    <aihio-card data-aihio-intent="surface">
      <form>
        <aihio-card-header>
          <aihio-card-title>Security</aihio-card-title>
          <aihio-card-description>Rotate credentials and confirm recovery options.</aihio-card-description>
        </aihio-card-header>
        <aihio-card-content>
          <aihio-field data-aihio-intent="form-field">
            <label slot="label">Recovery email</label>
            <aihio-input data-aihio-intent="text-entry" type="email" name="recovery-email" autocomplete="email" value="security@company.com"></aihio-input>
            <span slot="description">Used only if you lose access to your account.</span>
          </aihio-field>
        </aihio-card-content>
        <aihio-card-footer>
          <aihio-cluster data-aihio-intent="layout" grow justify="end">
            <aihio-button data-aihio-intent="primary-action" type="submit">Save security settings</aihio-button>
          </aihio-cluster>
        </aihio-card-footer>
      </form>
    </aihio-card>
  </aihio-tab-panel>
</aihio-tabs>