# DropDown

- **what it is**: a `<details>` whose `<summary>` wears the `button` theme
- **its own props**: `open`, `label`, `icon`, `iconOpen`, `iconClose`, `arrow`, `name`, `type`, `disabled`
- **example**: `drop-down`

From the [Composites](/docs/packages/ui#composites) section of [`@aweftjs/ui`](/docs/packages/ui).

## Example

Every state, type and size, rendered in light and dark from [`recipes/ui/examples/drop-down.example.tsx`](/docs/recipes/ui/files/examples/drop-down.example.tsx):

```tsx
// DropDown: a native `<details>` whose summary wears the button theme, so the keyboard, the role
// and the expanded state are the platform's. It opens in the page's flow, not over it.

import { mutable } from '@aweftjs/core';
import { Card, DropDown, Icon, h } from '@aweftjs/ui';

import { ids } from '../example.ts';
import type { ExampleComponent } from '../example.ts';

export const name = 'DropDown';
export const order = 43;

export const Example: ExampleComponent = (props) => {
	const at = ids(props.mode);
	const filters = mutable(false);

	return (
		<div theme="column">
			<DropDown label="Filters" open={filters} id={at('dropdown')}>
				<Card>
					<p theme={['text', 'sm']} id={at('dropdown-content')}>Everything under the summary.</p>
				</Card>
			</DropDown>

			<DropDown label="Open already" open={mutable(true)} id={at('dropdown-open')}>
				<p theme={['text', 'sm']}>A section that starts open.</p>
			</DropDown>

			<DropDown label="Locked" disabled={true} id={at('dropdown-disabled')}>
				<p theme={['text', 'sm']}>Nothing opens this.</p>
			</DropDown>

			<DropDown
				label="Its own two icons"
				arrow="left"
				iconOpen={<Icon name="lucide:minus" />}
				iconClose={<Icon name="lucide:plus" />}
				id={at('dropdown-icons')}
			>
				<p theme={['text', 'sm']}>A plus that becomes a minus, on the other side.</p>
			</DropDown>
		</div>
	);
};
```