Salad UI
- 1.3.0

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.

Component events

  • :on-value-changed - Fired when an item is expanded or collapsed.
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>
    Is it accessible?
  </.accordion_trigger>
  <.accordion_content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </.accordion_content>
</.accordion_item>
<.accordion_item value="item-2">
  <.accordion_trigger>
    Is it styled?
  </.accordion_trigger>
  <.accordion_content>
    Yes. It comes with default styles that matches the other components' aesthetic.
  </.accordion_content>
</.accordion_item>
<.accordion_item value="item-3">
  <.accordion_trigger>
    Is it animated?
  </.accordion_trigger>
  <.accordion_content>
    Yes. It's animated by default, but you can disable it if you prefer.
  </.accordion_content>
</.accordion_item>