Add Select wrapper component - provides context for child components

Renders the Carbon add select web component.

Example

<Carbon.add_select>
  ...
</Carbon.add_select>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Attributes

• multi (:boolean) - Whether this is a multi-select (checkboxes) or single-select (radio buttons) Carbon default: false. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block

Add Select Body component - contains the main content area

Renders the Carbon add select body web component.

Example

<Carbon.add_select_body id="my-add-select-body" on_search="my_event">
  ...
</Carbon.add_select_body>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Events

Each on_* attribute takes the name of a LiveView event and requires an id. The LiveView receives %{"detail" => ..., "value" => ..., "id" => ...}.

• on_search - Fired when search term changes; detail: { searchTerm }
• on_breadcrumb_click - Fired when a breadcrumb link is clicked; detail: { index }

Attributes

• items_label (:string) - Label for items section Carbon default: "". Defaults to nil.
• global_search_label (:string) - Global search label Carbon default: "". Defaults to nil.
• global_search_placeholder (:string) - Global search placeholder Carbon default: "Search". Defaults to nil.
• search_results_title (:string) - Search results title Carbon default: "Search results". Defaults to nil.
• item_count (:any) - Item count for display. When undefined, no count badge is rendered. Carbon default: "undefined". Defaults to nil.
• hide_search (:boolean) - Whether to hide the search input Carbon default: false. Defaults to nil.
• layout (:any) - Layout direction for the list body: 'vertical' (default) or 'horizontal' (for hierarchy) Carbon default: "vertical". Must be one of "vertical", or "horizontal".
• path (:any) - Navigation path for breadcrumbs Type: { id: string; title: string; }[]. Carbon default: []. Defaults to nil.
• on_search (:string) - LiveView event name, sent when the component emits its "add select body search" event. Fired when search term changes; detail: { searchTerm }. Defaults to nil.
• on_breadcrumb_click (:string) - LiveView event name, sent when the component emits its "add select body breadcrumb click" event. Fired when a breadcrumb link is clicked; detail: { index }. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block

Add Select Column component — optional column wrapper providing column-level search, title, and "Select All" functionality. Propagates multi context to child rows via the multi property/attribute.

Renders the Carbon add select column web component.

Example

<Carbon.add_select_column id="my-add-select-column" on_search="my_event">
  ...
</Carbon.add_select_column>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Events

Each on_* attribute takes the name of a LiveView event and requires an id. The LiveView receives %{"detail" => ..., "value" => ..., "id" => ...}.

• on_search - Fired when column search changes; detail: { searchTerm }
• on_select_all - Fired when "Select All" checkbox changes; detail: { checked }

Attributes

• title (:string) - Column title shown in the header Carbon default: "". Defaults to nil.
• search_label (:string) - Label text for the column search input (accessibility) Carbon default: "Search". Defaults to nil.
• search_placeholder (:string) - Placeholder text for the column search input Carbon default: "Search". Defaults to nil.
• hide_search (:boolean) - Whether to hide the column search input Carbon default: false. Defaults to nil.
• multi (:boolean) - Whether this column uses multi-selection (checkboxes) or single-selection (radio buttons) Carbon default: false. Defaults to nil.
• show_select_all (:boolean) - Whether to show the "Select All" checkbox (only when multi is true) Carbon default: false. Defaults to nil.
• item_count (:any) - Total number of items in the column (shown in tag badge) Carbon default: 0. Defaults to nil.
• all_selected (:boolean) - Whether all items are currently selected Carbon default: false. Defaults to nil.
• all_indeterminate (:boolean) - Whether the "Select All" checkbox is in an indeterminate state Carbon default: false. Defaults to nil.
• on_search (:string) - LiveView event name, sent when the component emits its "add select column search" event. Fired when column search changes; detail: { searchTerm }. Defaults to nil.
• on_select_all (:string) - LiveView event name, sent when the component emits its "add select column select all" event. Fired when "Select All" checkbox changes; detail: { checked }. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block

Add Select Item Panel — side panel displaying detailed information about an item. CSS modifier ${blockClass}__item-summary-panel--open is added when open is true, enabling CSS-driven slide-in/out transitions.

Renders the Carbon add select item panel web component.

Example

<Carbon.add_select_item_panel id="my-add-select-item-panel" on_close="my_event">
  ...
</Carbon.add_select_item_panel>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Events

Each on_* attribute takes the name of a LiveView event and requires an id. The LiveView receives %{"detail" => ..., "value" => ..., "id" => ...}.

• on_close - Fired when close icon is clicked

Attributes

• title (:string) - Panel title Carbon default: "Item details". Defaults to nil.
• open (:boolean) - Controls panel visibility via CSS modifier class (enables CSS transitions) Carbon default: false. Defaults to nil.
• close_icon_description (:string) - Accessible label for the close icon button Carbon default: "Close". Defaults to nil.
• show_close_button (:boolean) - Whether to show the close button Carbon default: true. Defaults to nil.
• on_close (:string) - LiveView event name, sent when the component emits its "add select item panel close" event. Fired when close icon is clicked. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block

Add Select Row component - represents a single selectable row

Renders the Carbon add select row web component.

Example

<Carbon.add_select_row id="my-add-select-row" on_select="my_event">
  ...
</Carbon.add_select_row>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Events

Each on_* attribute takes the name of a LiveView event and requires an id. The LiveView receives %{"detail" => ..., "value" => ..., "id" => ...}.

• on_select - Fired when row is selected/deselected
• on_navigate - Fired when navigating to children
• on_item_panel_click - Fired when the item panel icon button is clicked

Attributes

• item_id (:string) - Unique identifier for the item Carbon default: "". Defaults to nil.
• title (:string) - Item title Carbon default: "". Defaults to nil.
• subtitle (:string) - Item subtitle Carbon default: "". Defaults to nil.
• value (:string) - Item value Carbon default: "". Defaults to nil.
• selected (:boolean) - Whether the item is selected Carbon default: false. Defaults to nil.
• indeterminate (:boolean) - Whether the checkbox is in an indeterminate state (multi hierarchical) Carbon default: false. Defaults to nil.
• disabled (:boolean) - Whether the item is disabled Carbon default: false. Defaults to nil.
• skeleton (:boolean) - Whether to render the row as a skeleton (loading) state Carbon default: false. Defaults to nil.
• has_item_panel (:boolean) - Whether to show the item details icon button Carbon default: false. Defaults to nil.
• item_panel_open (:boolean) - Whether the item panel is currently open for this item Carbon default: false. Defaults to nil.
• item_panel_icon_description (:string) - Accessible label for the item panel icon button Carbon default: "View details". Defaults to nil.
• has_children (:boolean) - Whether the item has children (for navigation) Carbon default: false. Defaults to nil.
• parent_id (:string) - Parent ID for hierarchical navigation Carbon default: "". Defaults to nil.
• on_select (:string) - LiveView event name, sent when the component emits its "add select row select" event. Fired when row is selected/deselected. Defaults to nil.
• on_navigate (:string) - LiveView event name, sent when the component emits its "add select row navigate" event. Fired when navigating to children. Defaults to nil.
• on_item_panel_click (:string) - LiveView event name, sent when the component emits its "add select row item panel click" event. Fired when the item panel icon button is clicked. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block

Add Select Selection Summary — displays the list of selected items.

Renders the Carbon add select selection summary web component.

Example

<Carbon.add_select_selection_summary id="my-add-select-selection-summary" on_edit="my_event">
  ...
</Carbon.add_select_selection_summary>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Events

Each on_* attribute takes the name of a LiveView event and requires an id. The LiveView receives %{"detail" => ..., "value" => ..., "id" => ...}.

• on_edit - Fired when edit icon is clicked

Attributes

• title (:string) - Panel title Carbon default: "Selected items". Defaults to nil.
• selected_item_count (:any) - Number of selected items — shown as a badge next to the title when provided. Badge is hidden when this is omitted/undefined. Carbon default: "undefined". Defaults to nil.
• show_edit_icon (:boolean) - Show edit icon next to title Carbon default: false. Defaults to nil.
• edit_icon_description (:string) - Accessible label for the edit icon button Carbon default: "Edit selections". Defaults to nil.
• on_edit (:string) - LiveView event name, sent when the component emits its "add select selection summary edit" event. Fired when edit icon is clicked. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block

Add Select Selection Summary Item — individual selected item display.

Renders the Carbon add select selection summary item web component.

Example

<Carbon.add_select_selection_summary_item id="my-add-select-selection-summary-item" on_remove="my_event">
  ...
</Carbon.add_select_selection_summary_item>

Child content is rendered inside the component. To fill a named slot of the component, set slot="name" on the child element.

Events

Each on_* attribute takes the name of a LiveView event and requires an id. The LiveView receives %{"detail" => ..., "value" => ..., "id" => ...}.

• on_remove - Fired when remove button clicked; detail: { itemId }

Attributes

• use_accordion (:boolean) - Use accordion pattern for display Carbon default: false. Defaults to nil.
• remove_button_label (:string) - Accessible label for the remove button Carbon default: "Remove item". Defaults to nil.
• hide_remove_button (:boolean) - When true, the remove button is not rendered Carbon default: false. Defaults to nil.
• on_remove (:string) - LiveView event name, sent when the component emits its "add select selection summary item remove" event. Fired when remove button clicked; detail: { itemId }. Defaults to nil.
• Global attributes are accepted. any additional HTML attributes, e.g. class, id, slot, phx-*.

Slots

• inner_block