Pattern settings-section

Settings Section

A settings panel in a card: a form of labelled fields — text, a native select for a short list of choices, and a switch for an on/off setting — with Reset and Save that reset and submit it.

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

Intents surface form-field text-entry toggle-state status primary-action secondary-action layout

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.

Settings Section

Show code · 46 lines

<aihio-card data-aihio-intent="surface">
  <form>
    <aihio-card-header>
      <aihio-cluster data-aihio-intent="layout" justify="between">
        <aihio-card-title>Workspace settings</aihio-card-title>
        <aihio-badge data-aihio-intent="status" variant="secondary">Live</aihio-badge>
      </aihio-cluster>
      <aihio-card-description>Update the defaults your team sees on first login.</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">Workspace name</label>
          <aihio-input
            data-aihio-intent="text-entry"
            name="workspace-name"
            value="Northwind"
            required></aihio-input>
        </aihio-field>

        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Default landing page</label>
          <select name="landing-page">
            <option value="overview">Overview</option>
            <option value="projects" selected>Projects</option>
            <option value="settings">Settings</option>
          </select>
          <span slot="description">Where members arrive after they sign in.</span>
        </aihio-field>

        <aihio-field data-aihio-intent="form-field">
          <label slot="label">Email notifications</label>
          <aihio-switch data-aihio-intent="toggle-state" name="email-notifications" checked></aihio-switch>
          <span slot="description">A digest of workspace activity, sent weekly.</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="secondary-action" variant="outline" type="reset">Reset</aihio-button>
        <aihio-button data-aihio-intent="primary-action" type="submit">Save changes</aihio-button>
      </aihio-cluster>
    </aihio-card-footer>
  </form>
</aihio-card>