<.dropdown id="dropdown-single-simple-dropdown-with-options" options={["Element 1", "Element 2"]}>
  Trigger Text
</.dropdown>

<.dropdown color="danger" id="dropdown-single-pass-attrs-to-trigger-button" options={["Element 1", "Element 2"]}>
  Trigger Text
</.dropdown>

<.dropdown id="dropdown-single-custom-trigger" options={["Element 1", "Element 2"]}>
  <:trigger_el><.avatar class="cursor-pointer" image="/images/profile.jpg" /></:trigger_el>
</.dropdown>

<.dropdown id="dropdown-single-set-width" options={["Element 1", "Element 2"]} width="w-40">
  Trigger Text
</.dropdown>

<.dropdown id="dropdown-single-placement" options={["Element 1", "Element 2"]} place="right">
  Trigger Text
</.dropdown>

<.dropdown id="dropdown-single-tuple-list-as-options" options={[{"One", 1}, {"Two", 2}]}>
  Trigger Text
</.dropdown>

<.dropdown id="dropdown-single-map-list-as-options" options={[%{label: "One", value: 1}, %{label: "Two", value: 2}]}>
  Trigger Text
</.dropdown>

<.dropdown id="dropdown-single-use-dropdown-slot">
  Trigger Text
  <:dropdown_content>
    <.dropdown_element>
      <div class="px-4 flex items-center">
        <input id="default-radio-1" type="radio" value="" name="default-radio" class="w-4 h-4 text-bd-blue-600 bg-bd-gray-100 border-bd-gray-300 focus:ring-bd-blue-500 dark:focus:ring-bd-blue-600 dark:ring-offset-bd-gray-700 dark:focus:ring-offset-bd-gray-700 focus:ring-2 dark:bg-bd-gray-600 dark:border-bd-gray-500">
        <label for="default-radio-1" class="ml-2 text-sm font-medium text-bd-gray-900 dark:text-bd-gray-300">Default radio</label>
      </div>
    </.dropdown_element>
    <.dropdown_element>
      <div class="px-4 flex items-center">
        <input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-bd-blue-600 bg-bd-gray-100 border-bd-gray-300 focus:ring-bd-blue-500 dark:focus:ring-bd-blue-600 dark:ring-offset-bd-gray-700 dark:focus:ring-offset-bd-gray-700 focus:ring-2 dark:bg-bd-gray-600 dark:border-bd-gray-500">
        <label for="default-radio-2" class="ml-2 text-sm font-medium text-bd-gray-900 dark:text-bd-gray-300">Checked state</label>
      </div>
    </.dropdown_element>
  </:dropdown_content>
</.dropdown>

<.dropdown color="outline" id="dropdown-single-outline" options={["Element 1", "Element 2"]}>
  Trigger Text
</.dropdown>