A2UI component gallery reference

This page provides a comprehensive reference for all available A2UI components, including layout, display, interactive, and container components, as well as common properties.

Common Properties

All components, regardless of their specific type, share a set of common properties that can be configured:

Property Required Description
id Yes A unique identifier for the component within the current surface.
accessibility No Attributes to improve accessibility, such as labels and roles.
weight No A value used in Row or Column layouts to control how much space the component takes up relative to its siblings, similar to flex-grow.

For a complete specification of all properties, including common and component-specific ones, see the Standard Catalog Definition (JSON Schema).

Layout Components

Layout components are used to structure and arrange other components within the user interface. The following layout components are available:

Row

A Row is a layout component used to arrange its child components horizontally, from left to right. It acts as a container where you can place multiple components side-by-side. The exact spacing and positioning of the children within the row can be controlled using the distribution and alignment properties.

The following table outlines the properties available for the Row component:

Property Type/Values Description
children explicitList or template The child components to be arranged horizontally within the Row.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controls how child components are distributed along the horizontal axis.
alignment start, center, end, stretch Controls how child components are aligned on the vertical axis.

JSON

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": { "explicitList": ["btn1", "btn2", "btn3"] },
      "distribution": "spaceBetween",
      "alignment": "center"
    }
  }
}

Column

A Column is a layout component used to arrange its child components vertically, from top to bottom. It acts as a container where you can place multiple components one below the other. The exact spacing and positioning of the children within the column can be controlled using the distribution and alignment properties.

The following table outlines the properties available for the Column component:

Property Type/Values Description
children explicitList or template The child components to be arranged vertically within the Column.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controls how child components are distributed along the vertical axis.
alignment start, center, end, stretch Controls how child components are aligned on the horizontal axis.

JSON

{
  "id": "content",
  "component": {
    "Column": {
      "children": { "explicitList": ["header", "body", "footer"] },
      "distribution": "start",
      "alignment": "stretch"
    }
  }
}

List

A List is a layout component that displays a scrollable list of items. It supports static children and dynamic templates for generating items from data. The scroll direction can be vertical or horizontal.

The following table outlines the properties available for the List component:

Property Type/Values Description
children explicitList or template The items to be displayed in the list.
direction vertical, horizontal The scroll direction of the list.
alignment start, center, end, stretch Controls how list items are aligned on the cross axis.

JSON

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      },
      "direction": "vertical"
    }
  }
}

Display Components

Display components are used to present information to the user. The following display components are available:

Text

The Text component displays text content and supports various styling hints, such as headings, captions, and body text.

The following table outlines the properties available for the Text component:

Property Type/Values Description
text BoundValue The text content to display.
usageHint h1, h2, h3, h4, h5, caption, body Styling hint for the text.

JSON

{
  "id": "title",
  "component": {
    "Text": {
      "text": { "literalString": "Welcome to A2UI" },
      "usageHint": "h1"
    }
  }
}

Image

An Image component displays images from a specified URL and provides options to control how the image fits its container.

The following table outlines the properties available for the Image component:

Property Type/Values Description
url BoundValue The URL of the image to display.
fit String How the image should fit its container (e.g., "cover").
usageHint String Hint for usage (e.g., "hero").

JSON

{
  "id": "hero",
  "component": {
    "Image": {
      "url": { "literalString": "https://example.com/hero.png" },
      "fit": "cover",
      "usageHint": "hero"
    }
  }
}

Icon

The Icon component displays icons from a standard set defined in the catalog.

The following table outlines the properties available for the Icon component:

Property Type/Values Description
name BoundValue The name of the icon to display (e.g., "check").

JSON

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": { "literalString": "check" }
    }
  }
}

Divider

The Divider component displays a visual separator line, which can be either horizontal or vertical.

The following table outlines the properties available for the Divider component:

Property Type/Values Description
axis horizontal, vertical The orientation of the divider line.

JSON

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

Interactive Components

Interactive components let you interact with the application, such as providing input or triggering actions. The following interactive components are available:

Button

The Button component is a clickable element that triggers a specific action or event within the application.

The following table outlines the properties available for the Button component:

Property Type/Values Description
child Component ID The ID of the component to display inside the button (e.g., a Text component).
primary Boolean Whether this is a primary (emphasized) button.
action Object The action to trigger when the button is clicked.

JSON

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-text",
      "primary": true,
      "action": {
        "name": "submit_form"
      }
    }
  }
}

TextField

The TextField is an interactive component that lets you input text. It also supports optional validation.

The following table outlines the properties available for the TextField component:

Property Type/Values Description
label BoundValue The label for the text field.
text BoundValue The text content or bound path.
textFieldType shortText, longText, number, obscured, date The type of text field.
validationRegexp String Regular expression for validation.

JSON

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": { "literalString": "Email Address" },
      "text": { "path": "/user/email" },
      "textFieldType": "shortText"
    }
  }
}

CheckBox

The CheckBox component is a boolean toggle that lets you switch a setting on or off.

The following table outlines the properties available for the CheckBox component:

Property Type/Values Description
label BoundValue The label for the checkbox.
value BoundValue (boolean) The value of the checkbox (true/false) or bound path.

JSON

{
  "id": "terms-checkbox",
  "component": {
    "CheckBox": {
      "label": { "literalString": "I agree to the terms" },
      "value": { "path": "/form/agreedToTerms" }
    }
  }
}

Slider

The Slider component lets you select a numeric value from a specific range.

The following table outlines the properties available for the Slider component:

Property Type/Values Description
value BoundValue (number) The current value of the slider or bound path.
minValue Number The minimum value of the range.
maxValue Number The maximum value of the range.

JSON

{
  "id": "volume",
  "component": {
    "Slider": {
      "value": { "path": "/settings/volume" },
      "minValue": 0,
      "maxValue": 100
    }
  }
}

DateTimeInput

The DateTimeInput component lets you pick a date and time.

The following table outlines the properties available for the DateTimeInput component:

Property Type/Values Description
value BoundValue The selected date/time value or bound path.
enableDate Boolean Whether to enable date selection.
enableTime Boolean Whether to enable time selection.

JSON

{
  "id": "date-picker",
  "component": {
    "DateTimeInput": {
      "value": { "path": "/booking/date" },
      "enableDate": true,
      "enableTime": false
    }
  }
}

Multiple Choice

The MultipleChoice component lets you select one or more options from a list.

The following table outlines the properties available for the MultipleChoice component:

Property Type/Values Description
options Array of Objects The list of options selectable by the user. Each option should have a label and a value.
selections BoundValue The selected values or bound path.
maxAllowedSelections Number The maximum number of selections allowed.

JSON

{
  "id": "country-select",
  "component": {
    "MultipleChoice": {
      "options": [
        { "label": { "literalString": "USA" }, "value": "us" },
        { "label": { "literalString": "Canada" }, "value": "ca" }
      ],
      "selections": { "path": "/form/country" },
      "maxAllowedSelections": 1
    }
  }
}

Container Components

Container components are used to group and organize other components. The following container components are available:

Card

A Card component is a container with elevation, a border, and padding that groups related content.

The following table outlines the properties available for the Card component:

Property Type/Values Description
child Component ID The ID of the component to display inside the card.

JSON

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

A Modal component is an overlay dialog triggered by an entry point component.

The following table outlines the properties available for the Modal component:

Property Type/Values Description
entryPointChild Component ID The ID of the component that triggers the modal (e.g., a Button).
contentChild Component ID The ID of the component to display as the content of the modal.

JSON

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

Tabs

A Tabs component provides a tabbed interface for organizing content into switchable panels.

The following table outlines the properties available for the Tabs component:

Property Type/Values Description
tabItems Array of Objects The list of tabs. Each item should have a title and a child (component ID).

JSON

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        { "title": { "literalString": "General" }, "child": "general-tab" },
        { "title": { "literalString": "Privacy" }, "child": "privacy-tab" }
      ]
    }
  }
}

What's next