<ContentPanel> is the canonical collapsible section used to organize forms, settings, and detail views. Supports titles, status badges, action buttons, and permission gating.

`<ContentPanel>`

<ContentPanel> is the standard collapsible panel used to organize a page into discrete sections. Forms, settings groups, detail views, drawers — they all use ContentPanel.

It's collapsible by default. Pass @open={{true}} to render expanded.

Basic Usage

<ContentPanel @title='Driver Details' @open={{true}}>
  <InputGroup @name='Name' @value={{this.driver.name}} />
  <InputGroup @name='Phone'>
    <PhoneInput @value={{this.driver.phone}} />
  </InputGroup>
</ContentPanel>

Collapsible by Default

Without @open={{true}}, the panel renders collapsed:

<ContentPanel @title='Advanced Settings'>
  {{! This body is hidden until the user clicks the header }}
  <InputGroup @name='Webhook URL' @value={{this.webhookUrl}} />
</ContentPanel>

With a Status Badge

@titleStatus renders a <Badge> next to the title:

<ContentPanel
  @title='Order #FB-1234'
  @titleStatus={{this.order.status}}
  @open={{true}}
>
  {{! ... }}
</ContentPanel>

With a Subtitle

<ContentPanel
  @title='Payment Settings'
  @subtitle='Configure how customers pay you'
  @open={{true}}
>
  {{! ... }}
</ContentPanel>

With Action Buttons

The actions named block places action buttons in the panel header (right side):

<ContentPanel @title='Locations' @open={{true}}>
  <:actions>
    <Button
      @type='primary'
      @icon='plus'
      @text='Add Location'
      @onClick={{this.addLocation}}
    />
  </:actions>

  <:default>
    {{! Locations list }}
  </:default>
</ContentPanel>

Arguments

Title & Subtitle

Argument	Type	Description
`@title`	string	Panel title
`@subtitle`	string	Smaller text rendered beneath the title
`@prefixTitle`	string	Small text shown above the title
`@titleIcon`	string	FontAwesome icon next to the title
`@titleIconPrefix`	string	Icon prefix (`fas`, `far`, `fab`)
`@titleIconSize`	string	Default `xs`
`@titleIconClass`	string	Extra classes on the icon
`@titleStatus`	string	Status string — renders a `<Badge>` next to the title
`@disableTitleStatusHumanize`	boolean	Pass through to the `<Badge>`
`@hideStatusDot`	boolean	Pass through to the `<Badge>`
`@titleComponent`	string	Render a custom component instead of the default title block
`@titleComponentContext`	any	Context passed to `@titleComponent`
`@titleStatusContainerClass`	string	Extra classes around the status badge
`@titleStatusClass`	string	Extra classes on the status badge

Open / Toggle Behavior

Argument	Type	Default	Description
`@open`	boolean	`false`	Whether the panel starts open
`@toggleOnCaretOnly`	boolean	`false`	Only toggle when clicking the caret icon — clicking the title text does nothing
`@hideCaret`	boolean	`false`	Hide the chevron toggle
`@caretIcon`	string	`chevron`	The icon name (suffixed with `-down`/`-up` based on state)
`@caretLeft`	boolean	`false`	Render the caret on the left of the title instead of the right

Loading & Disabled

Argument	Type	Default	Description
`@isLoading`	boolean	`false`	Show a spinner inside the title row and dim the panel
`@disabled`	boolean	`false`	Visually disable the toggle (still clickable, but dimmed)
`@permission`	string	—	If the current user lacks this ability, the panel auto-disables and shows an "Unauthorized" tooltip

Argument	Type	Default	Description
`@helpText`	string	—	Tooltip on the title
`@exampleText`	string	—	Optional example beneath the help text
`@tooltipPlacement`	string	`right`	Tooltip placement

Action Buttons

@actionButtons accepts an array of action descriptors — each is rendered as a <Button> (or a custom component) in the panel header:

<ContentPanel
  @title='Settings'
  @open={{true}}
  @actionButtons={{this.headerActions}}
>
  {{! ... }}
</ContentPanel>

// in your component class
get headerActions() {
  return [
    { type: 'primary', icon: 'plus', text: 'Add', onClick: this.add },
    {
      icon: 'ellipsis',
      items: [   // dropdown menu
        { text: 'Export', onClick: this.export },
        { text: 'Import', onClick: this.import },
      ],
    },
  ];
}

For more control, use the actions named block instead.

Layout Class Hooks

A long tail of *Class arguments lets you target every internal element:

@wrapperClass, @containerClass, @panelClass, @panelHeaderClass, @panelHeaderLeftClass, @panelHeaderRightClass, @panelTitleClass, @panelTitleInlineClass, @panelTitleWrapperClass, @panelSubtitleInlineClass, @titleContainerClass, @prefixTitleClass, @prefixTitleContainerClass, @titleIconWrapperClass, @pad.

Callbacks

Argument	Signature	Description
`@onInsert`	`(api)`	Called when the panel is inserted. Receives `{ toggle, open, close }`
`@onToggle`	`(isOpen)`	Called whenever the panel toggles
`@onClick`	`(api)`	Called on any click in the header
`@onClickCaret`	`(api)`	Called when the caret specifically is clicked
`@onClickPanelTitle`	`(api)`	Called when the title (not the caret) is clicked

The api object contains { toggle, open, close } so you can imperatively control the panel from outside.

Imperative Control

Capture the API via @onInsert to control the panel from outside:

<ContentPanel @title='Filters' @onInsert={{this.captureApi}}>
  {{! ... }}
</ContentPanel>

<Button @text='Open filters' @onClick={{fn this.api.open}} />
<Button @text='Close filters' @onClick={{fn this.api.close}} />

@tracked api = null;

@action captureApi(api) {
  this.api = api;  // { toggle, open, close }
}

Yielded Blocks

Block	Purpose
(default)	The panel body
`:title`	Custom content next to the title (replaces the default title rendering)
`:actions`	Action buttons / dropdown in the header right

Real-World Examples

{{! Settings group with status badge }}
<ContentPanel
  @title='Stripe Gateway'
  @titleStatus={{if this.gateway.is_sandbox 'sandbox' 'live'}}
  @open={{true}}
>
  <InputGroup @name='Publishable Key' @value={{this.gateway.publishable_key}} />
  <InputGroup
    @name='Secret Key'
    @value={{this.gateway.secret_key}}
    @type='password'
  />
</ContentPanel>

{{! Permission-gated panel }}
<ContentPanel
  @title='Danger Zone'
  @permission='platform manage organization'
  @helpText='Only org admins can change these settings'
>
  <Button @type='danger' @text='Delete Organization' @onClick={{this.delete}} />
</ContentPanel>

{{! With actions block }}
<ContentPanel @title='Drivers' @open={{true}}>
  <:actions>
    <Button
      @type='primary'
      @icon='plus'
      @text='New Driver'
      @onClick={{this.addDriver}}
    />
    <Button @icon='filter' @onClick={{this.openFilters}} />
  </:actions>

  <:default>
    {{! Drivers list }}
  </:default>
</ContentPanel>

{{! Loading state }}
<ContentPanel
  @title='Order Details'
  @isLoading={{this.isLoading}}
  @open={{true}}
>
  {{#unless this.isLoading}}
    {{! Order body }}
  {{/unless}}
</ContentPanel>

Source

File	Description
`addon/components/content-panel.hbs`	Template
`addon/components/content-panel.js`	Class

ContentPanel

On this page