Spectrum Components API

Schema version: 6.0.0

List view

List views display rows of data or options that users can browse, select, and interact with.

PropertyValuesDefault valueRequired
selection mode
none / single / multiple
Defines how many items can be selected at once.
single
is quiet
yes / no
If true, the list view uses a quiet visual style.
no
items
yes / no
nono
{
  "slug": "list-view",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/list-view.json",
  "title": "List view",
  "description": "List views display rows of data or options that users can browse, select, and interact with.",
  "meta": {
    "category": "navigation",
    "documentationUrl": "https://spectrum.adobe.com/page/list-view/"
  },
  "type": "object",
  "properties": {
    "selectionMode": {
      "type": "string",
      "enum": [
        "none",
        "single",
        "multiple"
      ],
      "default": "single",
      "description": "Defines how many items can be selected at once."
    },
    "isQuiet": {
      "type": "boolean",
      "default": false,
      "description": "If true, the list view uses a quiet visual style."
    },
    "items": {
      "type": "array",
      "description": "An array of list view items.",
      "items": {
        "type": "object",
        "properties": {
          "label": {
            "type": "string",
            "description": "Primary text displayed for the item."
          },
          "description": {
            "type": "string",
            "description": "Secondary text displayed under the label (optional)."
          },
          "hideCheckbox": {
            "type": "boolean",
            "default": false,
            "description": "If true, the checkbox is hidden."
          },
          "hideDragHandle": {
            "type": "boolean",
            "default": false,
            "description": "If true, the drag handle is hidden."
          },
          "hideNavigationIndicator": {
            "type": "boolean",
            "default": false,
            "description": "If true, the navigation indicator is hidden."
          },
          "isDisabled": {
            "type": "boolean",
            "default": false,
            "description": "If true, the item is disabled."
          },
          "isSelected": {
            "type": "boolean",
            "default": false,
            "description": "If true, the item is selected."
          },
          "overflowMode": {
            "type": "string",
            "enum": [
              "wrap",
              "truncate"
            ],
            "default": "truncate",
            "description": "Defines how text should behave when it overflows the available space."
          },
          "itemRounding": {
            "type": "string",
            "enum": [
              "none",
              "top",
              "bottom"
            ],
            "default": "none",
            "description": "Defines the border radius of the list view item."
          },
          "isEmphasized": {
            "type": "boolean",
            "default": false
          },
          "state": {
            "type": "string",
            "enum": [
              "default",
              "hover",
              "dragged"
            ],
            "default": "default",
            "description": "The interaction state of the list view item."
          }
        },
        "required": [
          "label"
        ]
      }
    }
  }
}
← Back to home