Salad UI

Accordion

The main accordion component that manages the accordion state.

Read more Read less

Options

  • :id - Required unique identifier for the accordion.
  • :type - Type of accordion: “single” or “multiple”. Defaults to “single”.
  • :value - The currently expanded items. String for “single”, list for “multiple”.
  • :default-value - The default expanded items. Used if :value is not provided.
  • :disabled - Whether the accordion is disabled. Defaults to false.
  • :on-value-changed - Handler for accordion value change event.
  • :class - Additional CSS classes.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the accordion
type :string

Whether only one item can be open at a time
"single"
value :any

The value(s) of the currently expanded item(s)
default-value :any

The default value(s) of the expanded item(s)
disabled :boolean

Whether the accordion is disabled
false
on-value-changed :any

Handler for accordion value change event
class :string
rest :global
Required inner_block * :slot 
<.accordion_item value="item-1">
  <.accordion_trigger>
    Regular Item
  </.accordion_trigger>
  <.accordion_content>
    This is a regular item that can be expanded/collapsed.
  </.accordion_content>
</.accordion_item>
<.accordion_item value="item-2" disabled>
  <.accordion_trigger>
    Disabled Item
  </.accordion_trigger>
  <.accordion_content>
    This item is disabled and cannot be interacted with.
  </.accordion_content>
</.accordion_item>
<.accordion_item value="item-3">
  <.accordion_trigger>
    Another Regular Item
  </.accordion_trigger>
  <.accordion_content>
    This is another regular item that can be expanded/collapsed.
  </.accordion_content>
</.accordion_item>