Expandable

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	subtitle='Subtitle'
>
	<span>This is demo content</span>
</Expandable>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Actions

Add extra controls to the right of the label.

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	subtitle='Subtitle'
	actions={
		<Button
			icon={icons.emptyCircle}
			size='small'
			onPress={...}
		/>
	}
>
	<span>This is demo content</span>
</Expandable>

Keep actions on expand

If you want to keep the actions visible even when the content is expanded, you can use the keepActionsOnExpand prop.

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	subtitle='Subtitle'
	actions={
		<Button
			icon={icons.emptyCircle}
			onPress={...}
		/>
	}
	keepActionsOnExpand
>
	<span>This is demo content</span>
</Expandable>

Disable focus trapping

By default, the component will trap focus when expanded. If you want to disable this behavior, you can use the noFocusHandling prop.

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	noFocusHandling
>
	<span>This is demo content</span>
</Expandable>

Replace expand button

In case you want to replace the expand button with your own, use the customOpenButton prop.

The following props are provided:

• open - whether the content is expanded or not
• toggleOpen - function to toggle the expanded state
• tooltip - tooltip text for the button (can be replaced with your own)
• disabled - whether the control is disabled

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	customOpenButton={({ open, toggleOpen, tooltip, disabled }) => (
		<Button
			icon={open ? icons.arrowUp : icons.arrowDown}
			onPress={toggleOpen}
			type='ghost'
			disabled={disabled}
			aria-label={tooltip}
			tooltip
		/>
	)
	}
>
	<span>This is demo content</span>
</Expandable>