<.dm_select
  id="select-single-default"
  label="Country"
  name="country"
  options={[{"us", "United States"}, {"ca", "Canada"}, {"mx", "Mexico"}]}
  prompt="Select a country"
 />

<.dm_select
  id="select-single-with-value"
  label="Priority"
  name="priority"
  value="medium"
  options={[{"low", "Low"}, {"medium", "Medium"}, {"high", "High"}, {"urgent", "Urgent"}]}
 />

<.dm_select
  id="select-single-no-prompt"
  label="Status"
  name="status"
  value="active"
  options={[{"active", "Active"}, {"inactive", "Inactive"}, {"pending", "Pending"}]}
 />

<.dm_select
  id="select-sizes-xs"
  label="XS Select"
  name="xs"
  size="xs"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
 />
<.dm_select
  id="select-sizes-sm"
  label="SM Select"
  name="sm"
  size="sm"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
 />
<.dm_select
  id="select-sizes-md"
  label="MD Select"
  name="md"
  size="md"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
 />
<.dm_select
  id="select-sizes-lg"
  label="LG Select"
  name="lg"
  size="lg"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
 />

<.dm_select
  id="select-colors-primary"
  label="Primary"
  name="primary"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select primary"
  color="primary"
 />
<.dm_select
  id="select-colors-secondary"
  label="Secondary"
  name="secondary"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select secondary"
  color="secondary"
 />
<.dm_select
  id="select-colors-accent"
  label="Accent"
  name="accent"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select accent"
  color="accent"
 />
<.dm_select
  id="select-colors-success"
  label="Success"
  name="success"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select success"
  color="success"
 />
<.dm_select
  id="select-colors-warning"
  label="Warning"
  name="warning"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select warning"
  color="warning"
 />
<.dm_select
  id="select-colors-error"
  label="Error"
  name="error"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select error"
  color="error"
 />
<.dm_select
  id="select-colors-tertiary"
  label="Tertiary"
  name="tertiary"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select tertiary"
  color="tertiary"
 />
<.dm_select
  id="select-colors-info"
  label="Info"
  name="info"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select info"
  color="info"
 />

<.dm_select
  id="select-variants-ghost"
  label="Ghost Select"
  name="variant_ghost"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  variant="ghost"
 />
<.dm_select
  id="select-variants-filled"
  label="Filled Select"
  name="variant_filled"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  variant="filled"
 />
<.dm_select
  id="select-variants-bordered"
  label="Bordered Select"
  name="variant_bordered"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  variant="bordered"
 />

<.dm_select
  disabled
  id="select-single-disabled"
  label="Disabled Select"
  name="disabled"
  options={[{"option1", "Option 1"}, {"option2", "Option 2"}]}
 />

<.dm_select
  id="select-single-multiple"
  label="Tags (Multiple)"
  name="tags"
  value={["tech", "design"]}
  options={[{"tech", "Technology"}, {"design", "Design"}, {"business", "Business"}, {"marketing", "Marketing"}]}
  multiple
 />

<.dm_select id="select-single-option-groups" label="Category" name="category">
  <option value="">Select a category</option>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
    <option value="spinach">Spinach</option>
  </optgroup>
  <optgroup label="Grains">
    <option value="wheat">Wheat</option>
    <option value="rice">Rice</option>
    <option value="corn">Corn</option>
  </optgroup>
</.dm_select>

<.dm_select
  id="select-single-many-options"
  label="Timezone"
  name="timezone"
  options={[{"utc", "UTC"}, {"est", "Eastern Time"}, {"cst", "Central Time"}, {"mst", "Mountain Time"}, {"pst", "Pacific Time"}, {"akst", "Alaska Time"}, {"hst", "Hawaii Time"}]}
  prompt="Select timezone"
 />

<.dm_select
  id="select-validation-states-success-state"
  label="Status (success)"
  name="sel_vs_success"
  value="active"
  state="success"
  options={[{"active", "Active"}, {"inactive", "Inactive"}]}
 />
<.dm_select
  id="select-validation-states-warning-state"
  label="Category (warning)"
  name="sel_vs_warning"
  state="warning"
  options={[{"a", "Option A"}, {"b", "Option B"}]}
  prompt="Select a category"
 />

<.dm_select
  id="select-single-horizontal"
  label="Role"
  name="sel_horizontal"
  options={[{"admin", "Admin"}, {"editor", "Editor"}, {"viewer", "Viewer"}]}
  horizontal
 />

<.dm_select
  id="select-single-with-helper"
  label="Plan"
  name="sel_helper"
  options={[{"free", "Free"}, {"pro", "Pro"}, {"enterprise", "Enterprise"}]}
  helper="You can change your plan at any time."
 />

<.dm_select
  id="select-single-with-errors"
  label="Country"
  name="sel_errors"
  options={[{"us", "United States"}, {"ca", "Canada"}]}
  prompt="Select country"
  errors={["Please select a country."]}
 />