1. Home
  2. Docs
  3. docs
  4. Widgets
  5. Object

Object

  • Name: object
  • UI: a field containing one or more child widgets
  • Data type: Object of child widget values

The object widget allows you to group multiple widgets together, nested under a single field. You can choose any widget as a child of an object widget, even other object widgets.

Widget Options

For common options, see Common widget options.

Name

Type

Default

Description

fields

boolean

false

A nested list of widget fields to include in your widget

collapsed

boolean

false

Optional. Collapse the widget’s content by default

summary

string

value

Optional. The label displayed when the object is collapsed. Can use Template Transformations

Please note: A default value cannot be set directly on an object widget. Instead you can set defaults within each sub-field’s configuration

Example

name: 'profile'
label: 'Profile'
widget: 'object'
summary: '{{fields.name}}: {{fields.birthdate}}'
fields:
  - name: public
    label: Public
    widget: boolean
    default: true
  - name: name
    label: Name
    widget: string
  - name: 'birthdate'
    label: 'Birthdate'
    widget: 'date'
    default: ''
    format: 'MM/dd/yyyy'
  - name: 'address'
    label: 'Address'
    widget: 'object'
    collapsed: true
    fields:
      - name: street
        label: Street Address
        widget: string
      - name: city
        label: City
        widget: string
      - name: post-code
        label: Postal Code
        widget: string
name: 'profile',
label: 'Profile',
widget: 'object',
summary: '{{fields.name}}: {{fields.birthdate}}',
fields: [
  {
    name: 'public',
    label: 'Public',
    widget: 'boolean',
    default: true
  },
  {
    name: 'name',
    label: 'Name',
    widget: 'string'
  },
  {
    name: 'birthdate',
    label: 'Birthdate',
    widget: 'date',
    default: '',
    format: 'MM/dd/yyyy'
  },
  {
    name: 'address',
    label: 'Address',
    widget: 'object',
    collapsed: true,
    fields: [
      { name: 'street', label: 'Street Address', widget: 'string' },
      { name: 'city', label: 'City', widget: 'string' },
      { name: 'post-code', label: 'Postal Code', widget: 'string' },
    ],
  },
],