◉

Chip

Toggleable filter chip with checked/unchecked states. Wraps a single child (usually text).

type: "chip"interactivecontainersingle child

Unchecked Text Chip

Default unchecked filter chip

Cars

{
  "type": "chip",
  "data": {
    "checked": false,
    "child": {
      "type": "text",
      "data": {
        "value": "Cars",
        "ui": {
          "style": {
            "typography": {
              "style": "captionSemiBold"
            }
          }
        }
      }
    }
  }
}

Quick Start

{
  "type": "chip",
  "data": {}
}

Data Fields

Field	Type	Default	Description
checked	boolean	—	Checked state (null = non-toggleable)
size	enum smalllarge	large	Chip height: small=32, large=40

Style Fields

Field	Type	Default	Description
checked_background	color	—	Background when checked
unchecked_background	color	—	Background when unchecked
checked_content_color	color	—	Content color when checked
unchecked_content_color	color	—	Content color when unchecked
checked_border_color	color	—	Border color when checked
unchecked_border_color	color	—	Border color when unchecked

Layout Fields

Parent Layout Fields

Examples

Checked Chip

Active selected chip

Electronics

{
  "type": "chip",
  "data": {
    "checked": true,
    "child": {
      "type": "text",
      "data": {
        "value": "Electronics",
        "ui": {
          "style": {
            "typography": {
              "style": "captionSemiBold"
            }
          }
        }
      }
    }
  }
}

Small Size

32px height chip

Small

{
  "type": "chip",
  "data": {
    "size": "small",
    "checked": false,
    "child": {
      "type": "text",
      "data": {
        "value": "Small",
        "ui": {
          "style": {
            "typography": {
              "style": "captionRegular"
            }
          }
        }
      }
    }
  }
}

Custom Colors

Chip with custom checked/unchecked palette

Custom

{
  "type": "chip",
  "data": {
    "checked": false,
    "child": {
      "type": "text",
      "data": {
        "value": "Custom",
        "ui": {
          "style": {
            "typography": {
              "style": "captionSemiBold"
            }
          }
        }
      }
    },
    "ui": {
      "style": {
        "unchecked_background": {
          "palette": "warning",
          "shade": 50
        },
        "unchecked_content_color": {
          "palette": "warning",
          "shade": 700
        },
        "unchecked_border_color": {
          "palette": "warning",
          "shade": 200
        },
        "checked_background": {
          "palette": "warning",
          "shade": 500
        },
        "checked_content_color": {
          "hex": "#FFFFFF"
        }
      }
    }
  }
}

Filter Bar (Row of Chips)

Horizontal scrollable chip row

All

Cars

Real Estate

Electronics

{
  "type": "row",
  "data": {
    "children": [
      {
        "type": "chip",
        "data": {
          "checked": true,
          "child": {
            "type": "text",
            "data": {
              "value": "All",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Cars",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Real Estate",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      },
      {
        "type": "chip",
        "data": {
          "checked": false,
          "child": {
            "type": "text",
            "data": {
              "value": "Electronics",
              "ui": {
                "style": {
                  "typography": {
                    "style": "captionSemiBold"
                  }
                }
              }
            }
          }
        }
      }
    ],
    "ui": {
      "layout": {
        "spacing": 8,
        "crossAxis": "center"
      }
    }
  }
}

View Mode Selector

Listing Card