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="personal-info">
  <.accordion_trigger>
    Personal Information
  </.accordion_trigger>
  <.accordion_content>
    <.form for={%{}} as={:user} phx-submit="save_personal_info" class="space-y-4 py-2">
      <div class="space-y-2">
        <.label for="user_name">Full Name</.label>
        <.input id="user_name" name="user[name]" type="text" />
      </div>
      <div class="space-y-2">
        <.label for="user_email">Email Address</.label>
        <.input id="user_email" name="user[email]" type="email" />
      </div>
      <div class="space-y-2">
        <.label for="user_phone">Phone Number</.label>
        <.input id="user_phone" name="user[phone]" type="tel" />
      </div>
      <.button type="submit">Save Personal Info</.button>
    </.form>
  </.accordion_content>
</.accordion_item>

<.accordion_item value="address">
  <.accordion_trigger>
    Address Information
  </.accordion_trigger>
  <.accordion_content>
    <.form for={%{}} as={:address} phx-submit="save_address" class="space-y-4 py-2">
      <div class="space-y-2">
        <.label for="address_street">Street Address</.label>
        <.input id="address_street" name="address[street]" type="text" />
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div class="space-y-2">
          <.label for="address_city">City</.label>
          <.input id="address_city" name="address[city]" type="text" />
        </div>
        <div class="space-y-2">
          <.label for="address_state">State/Province</.label>
          <.input id="address_state" name="address[state]" type="text" />
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div class="space-y-2">
          <.label for="address_zip">Postal Code</.label>
          <.input id="address_zip" name="address[zip]" type="text" />
        </div>
        <div class="space-y-2">
          <.label for="address_country">Country</.label>
          <.input id="address_country" name="address[country]" type="text" />
        </div>
      </div>
      <div class="pt-2">
        <.checkbox id="address_primary" name="address[primary]" label="Set as primary address" />
      </div>
      <.button type="submit">Save Address</.button>
    </.form>
  </.accordion_content>
</.accordion_item>

<.accordion_item value="preferences" disabled={true}>
  <.accordion_trigger>
    Preferences (Disabled)
  </.accordion_trigger>
  <.accordion_content>
    This section is disabled and cannot be accessed.
  </.accordion_content>
</.accordion_item>