Selectable accordion consists of clickable items and their inner content, which is expanded when an item is selected.
Inner content areas accept any components inside.
- example:
```jsx
First item content
),
},
{
title: 'Second item',
content: (
Second item content
),
},
]}
/>;
```
### Type
- description: Change the type of items' controller with type prop. It supports 2 options:
checkbox - use when multiple items can be selected at once.toggle - use when items (or features) are enabled / disabled.
- example:
```jsx
Item content
),
},
{
title: 'Checkbox',
content: (
Item content
),
},
]}
/>
Item content
),
},
{
title: 'Toggle',
content: (
Item content
),
},
]}
/>
;
```
### Vertical padding
- description: Control vertical padding of selectable accordion items with verticalPadding prop:
medium is a larger padding that emphasizes a few items.small (default) is a standard padding for common cases.tiny is a compact padding that displays more items in a smaller space.Note that verticalPadding prop only controls the padding of selectable accordion items (and not their inner content).
- example:
```jsx
Item content
),
},
{
title: 'Medium',
content: (
Item content
),
},
]}
/>
Item content
),
},
{
title: 'Small',
content: (
Item content
),
},
]}
/>
Item content
),
},
{
title: 'Tiny',
content: (
Item content
),
},
]}
/>
;
```
### Title and subtitle
- description: Describe selectable accordion items with title and subtitle props.
These containers also accept any component or a composition of multiple elements.
- example:
```jsx
Item content
),
},
{
title: 'Title',
subtitle: (
Subtitle
Learn More
),
content: (
Item content
),
},
{
title: ,
subtitle: ,
content: (
Item content
),
},
]}
/>
;
```
### Initially open item
- description: By default, all selectable accordion items are closed until selected by the user.
Control which items are open on page load with initiallyOpen prop.
- example:
```jsx
Item content
),
},
{
title: 'Initially open',
initiallyOpen: true,
content: (
Item content
),
},
]}
/>
;
```
### Disabled item
- description: Disable a selectable accordion item with disabled prop.
Users will not be able to select or deselect it.
- example:
```jsx
Item content
),
},
{
title: 'Disabled',
disabled: true,
content: (
Item content
),
},
]}
/>
;
```
## Developer Examples
### Programatically controlled item
- description: Control the selectable accordion items programatically using open prop.
- example:
```jsx
() => {
const [firstOptionOpen, setFirstOptionOpen] = React.useState(true);
return (
Item content
),
},
{
title: 'Second item',
content: (
Item content
),
open: !firstOptionOpen,
},
]}
/>
);
};
```
## Common Use Case Examples
### In long settings pages
- description: A selectable accordion on a settings page helps save space and reduces mental load for the user.
This is because the UI displays only the settings that are relevant at a time.
- example:
```jsx
() => {
const [selectedOptions, setSelectedOptions] = React.useState([]);
return (
Connect More Benefits
>
sessions}
/>
),
},
{
title: 'Online Programs',
subtitle:
'Allow participation in different programs with this plan.',
content: (
setSelectedOptions([...selectedOptions, option])
}
onDeselect={(option) =>
setSelectedOptions(
selectedOptions.filter((item) => item !== option),
)
}
popoverProps={{ appendTo: 'window' }}
/>
),
},
]}
/>
);
};
```