---
url: /docs/components/expandable/frameworks/elements.md
---
# Expandable - Elements

Expandable is a layout component used for creating content that can be expanded and collapsed.

## Accessibility

## Usage

Use `variant` to choose the visual treatment:

* `variant="default"` - the standard unboxed expandable
* `variant="box"` - the boxed expandable treatment
* `variant="box-bleed"` - the boxed treatment that bleeds to the container edge on small screens
* `variant="default-with-divider"` - the full-width row treatment with dividers

New usage should prefer `variant`. The `box` and `bleed` flags are deprecated and remain supported only for compatibility.

## Examples

```html
<w-expandable variant="default" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>
```

### Raised variant

```html
<w-expandable variant="box" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>
```

### Raised edge-to-edge variant

```html
<w-expandable variant="box-bleed" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>
```

### Expandable with divider

```html
<w-expandable variant="default-with-divider" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>
```

### Custom title

This can be used if more control over styling is needed than the `title` prop allows

```html
<w-expandable variant="box" animated>
  <div slot="title" class="flex flex-row items-center">
    <w-icon-bag-16></w-icon-bag-16>
    <p class="ml-8 mb-0">This is a title with an icon</p>
  </div>
  <p>with expanded content</p>
</w-expandable>
```

### With expanded prop

```html
<w-expandable variant="box" animated title="I'm expanded by default" expanded>
  <p>content should be visible</p>
</w-expandable>
```

## Styling API

Expandable supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.

### Parts

Use `::part(part-name)` from outside the component.

* `base` - the root wrapper element
* `chevron` - the chevron container

```css
w-expandable::part(base) {
	box-shadow: inset 0 0 0 1px currentColor;
}
```

### Component tokens

Set these on `<w-expandable>` to override visuals.

```css
w-expandable {
	--w-c-expandable-bg: rebeccapurple;
	--w-c-expandable-border-color: cyan;
	--w-c-expandable-border-radius: 12px;
	--w-c-expandable-padding-x: 1rem;
	--w-c-expandable-padding-y: 1rem;
	--w-c-expandable-gap: 1.25rem;
}
```

##### Surface and border

* `--w-c-expandable-bg`
* `--w-c-expandable-bg-hover`
* `--w-c-expandable-bg-active`
* `--w-c-expandable-border-color`
* `--w-c-expandable-border-width`
* `--w-c-expandable-border-radius`
* `--w-c-expandable-color`
* `--w-c-expandable-icon-color`

##### Layout and spacing

* `--w-c-expandable-padding-x`
* `--w-c-expandable-padding-y`
* `--w-c-expandable-gap` - distance between the title area and the content when both are present

##### Typography

* `--w-c-expandable-title-font-size`
* `--w-c-expandable-title-line-height`
* `--w-c-expandable-title-font-weight`

##### Motion

* `--w-c-expandable-transition-duration`
* `--w-c-expandable-transition-timing-function`
* `--w-c-expandable-expansion-duration`
* `--w-c-expandable-expansion-timing-function`

## `<w-expandable>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| animated | `boolean` | `false` | Will animate the expansion/collapse |
| bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size. **Deprecated**: Use `variant="box-bleed"` instead. |
| box | `boolean` | `false` | Will make the expandable a Box. **Deprecated**: Use `variant="box"` instead. |
| button-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
| content-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
| expanded | `boolean` | `false` | Controls component's expanded state |
| heading-level | `number \| undefined` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
| no-chevron | `boolean` | `false` | Controls chevron visibility |
| title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
| variant | [`ExpandableVariant`](#expandablevariant) | `"default"` | Visual style of the expandable. |

### Property Details

#### animated

Will animate the expansion/collapse

* Type: `boolean`
* Default: `false`

#### bleed

**Deprecated**: Use `variant="box-bleed"` instead.

Will make the expandable full-width on the sm breakpoint size.

* Type: `boolean`
* Default: `false`

#### box

**Deprecated**: Use `variant="box"` instead.

Will make the expandable a Box.

* Type: `boolean`
* Default: `false`

#### button-class

**Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.

* Type: `string | undefined`
* Default: `-`

#### content-class

**Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.

* Type: `string | undefined`
* Default: `-`

#### expanded

Controls component's expanded state

* Type: `boolean`
* Default: `false`

#### heading-level

Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.

* Type: `number | undefined`
* Default: `-`

#### no-chevron

Controls chevron visibility

* Type: `boolean`
* Default: `false`

#### title

Component title. Used to display the title value which is always present regardless of whether the component is open or closed.

* Type: `string`
* Default: `-`

#### variant

Visual style of the expandable.
Accepted values are `"default"`, `"box"`, `"box-bleed"`, and `"default-with-divider"`.
If omitted, deprecated `box` and `bleed` flags are still used for compatibility.

* Type: [`ExpandableVariant`](#expandablevariant)
* Default: `"default"`

### Types

#### ExpandableVariant

`'default' | 'box' | 'box-bleed' | 'default-with-divider'`