<.dropdown id="dropdown-single-default" label="Dropdown">
  <.dropdown_item value="1" label="Item 1" />
  <.dropdown_item value="2" label="Item 2"><:right_icon><.chevron_right /></:right_icon></.dropdown_item>
  <.dropdown_item value="3" label="Item 3" secondary_text="Foo" />
  <.dropdown_item value="4" label="Item 4"><:left_icon><.category /></:left_icon></.dropdown_item>
  <.dropdown_item value="5" label="Item 5" />
</.dropdown>

<.dropdown disabled id="dropdown-single-disabled" label="Dropdown"/>

<.dropdown id="dropdown-single-large-items" label="Dropdown with large items">
  <.dropdown_item value="1" label="Item 1" size="large">
  <:left_icon><.category /></:left_icon>
  </.dropdown_item>
  <.dropdown_item value="2" label="Item 2" size="large" right_icon={false}>
  <:left_icon><.category /></:left_icon>
  </.dropdown_item>
  <.dropdown_item value="3" label="Item 3" size="large" secondary_text="Foo">
  <:left_icon><.category /></:left_icon>
  </.dropdown_item>
  <.dropdown_item value="4" label="Item 4" size="large">
  <:left_icon><.category /></:left_icon>
  </.dropdown_item>
  <.dropdown_item value="5" label="Item 5" size="large">
  <:left_icon><.category /></:left_icon>
  </.dropdown_item>
</.dropdown>

<.dropdown id="dropdown-single-with-icon" label="Dropdown">
  <:icon><.category /></:icon>
  <.dropdown_item value="1" label="Item 1"/>
</.dropdown>

<.dropdown id="dropdown-single-with-secondary-text" label="Date" secondary_text="Order by">
  <.dropdown_item value="1" label="Item 1" secondary_text="Foo"/>
</.dropdown>

<.dropdown
  id="dropdown-single-with-icon-and-secondary-text"
  label="Date"
  secondary_text="Order by"
>
  <:icon><.category /></:icon>
  <.dropdown_item value="1" label="Item 1" secondary_text="Foo"/>
</.dropdown>

<.dropdown id="dropdown-single-with-hint" label="Dropdown" hint="This is a hint">
  <.dropdown_item value="1" label="Item 1"/>
</.dropdown>

<.dropdown id="dropdown-single-many-options" label="Many Options">
  <.dropdown_item value="1" label="Option 1" />
  <.dropdown_item value="2" label="Option 2" />
  <.dropdown_item value="3" label="Option 3" />
  <.dropdown_item value="4" label="Option 4" />
  <.dropdown_item value="5" label="Option 5" />
  <.dropdown_item value="6" label="Option 6" />
  <.dropdown_item value="7" label="Option 7" />
  <.dropdown_item value="8" label="Option 8" />
  <.dropdown_item value="9" label="Option 9" />
  <.dropdown_item value="10" label="Option 10" />
  <.dropdown_item value="11" label="Option 11" />
  <.dropdown_item value="12" label="Option 12" />
  <.dropdown_item value="13" label="Option 13" />
  <.dropdown_item value="14" label="Option 14" />
  <.dropdown_item value="15" label="Option 15" />
  <.dropdown_item value="16" label="Option 16" />
  <.dropdown_item value="17" label="Option 17" />
  <.dropdown_item value="18" label="Option 18" />
  <.dropdown_item value="19" label="Option 19" />
  <.dropdown_item value="20" label="Option 20" />
</.dropdown>