<.dm_input id="input-single-default" label="Username" name="name" type="text" value={nil} />

<.dm_input
  id="input-single-password"
  label="Password"
  name="password"
  type="password"
  value={nil}
 />

<.dm_input
  id="input-single-email"
  label="Email"
  name="email"
  type="email"
  value={nil}
  class="input-sm"
 />

<.dm_input
  id="input-single-input-error"
  label="Search"
  name="search"
  type="search"
  value={nil}
  errors={["Search is required"]}
 />

<.dm_input id="input-single-checkbox" label="Checkbox" name="checkbox" type="checkbox" />

<.dm_input id="input-single-toggle" label="Auto" name="auto" type="toggle" value={nil} />

<.dm_input
  id="input-single-select"
  label="Location"
  name="location"
  type="select"
  value={nil}
  options={[{"New York", "new_york"}, {"California", [{"San Diego", "san_diego"}, {"San Francisco", "san_francisco"}, {"Los Angeles", "los_angeles"}]}]}
 />

<.dm_input
  id="input-single-select-multiple"
  label="Favorite Cities"
  name="favorite_cities"
  type="select"
  value={nil}
  options={[{"New York", "new_york"}, {"California", [{"San Diego", "san_diego"}, {"San Francisco", "san_francisco"}, {"Los Angeles", "los_angeles"}]}]}
  multiple
 />

<.dm_input
  id="input-single-checkbox-group"
  label="Favorite countries"
  name="favorite_countries"
  type="checkbox_group"
  value={nil}
  options={[{"United States", "us"}, {"United Kingdom", "uk"}, {"France", "fr"}, {"Germany", "de"}]}
  multiple
 />

<.dm_input
  id="input-single-radio-group"
  label="Most visited country"
  name="most_visited_country"
  type="radio_group"
  value={nil}
  options={[{"United States", "us"}, {"United Kingdom", "uk"}, {"France", "fr"}, {"Germany", "de"}]}
 />

<.dm_input
  id="input-single-ghost"
  label="Ghost Input"
  name="ghost_input"
  type="text"
  value={nil}
  variant="ghost"
 />

<.dm_input
  id="input-single-filled"
  label="Filled Input"
  name="filled_input"
  type="text"
  value={nil}
  variant="filled"
 />

<.dm_input
  id="input-single-bordered"
  label="Bordered Input"
  name="bordered_input"
  type="text"
  value={nil}
  variant="bordered"
 />

<.dm_input
  id="input-single-textarea"
  label="Story"
  name="story"
  type="textarea"
  value={nil}
 />

<.dm_input
  id="input-single-file"
  label="Attachment"
  name="attachment"
  type="file"
  value={nil}
 />

<.dm_input
  id="input-single-number"
  label="Quantity"
  name="quantity"
  type="number"
  value={nil}
 />

<.dm_input
  id="input-single-date"
  label="Birth Date"
  name="birth_date"
  type="date"
  value={nil}
 />

<.dm_input id="input-single-range" label="Volume" name="volume" type="range" value={nil} />

<.dm_input
  id="input-single-color-picker"
  label="Brand Color"
  name="brand_color"
  type="color_picker"
  value={nil}
 />

<.dm_input
  id="input-single-range-slider"
  label="Price Range"
  max={100}
  min={0}
  name="price_range"
  type="range_slider"
  value={nil}
 />

<.dm_input
  id="input-single-rating"
  label="Rate this item"
  name="rating"
  type="rating"
  value={3}
 />

<.dm_input id="input-single-tags" label="Add Tags" name="tags" type="tags" value={nil} />

<.dm_input
  id="input-single-password-strength"
  label="New Password"
  name="new_password"
  type="password_strength"
  value={nil}
 />

<.dm_input
  id="input-single-search-with-suggestions"
  label="Search Users"
  name="user_search"
  type="search_with_suggestions"
  value={nil}
  suggestions={["Alice", "Bob", "Carol", "Dave"]}
 />

<.dm_input
  id="input-colors-primary"
  label="Primary"
  name="c_primary"
  type="text"
  value={nil}
  color="primary"
 />
<.dm_input
  id="input-colors-secondary"
  label="Secondary"
  name="c_secondary"
  type="text"
  value={nil}
  color="secondary"
 />
<.dm_input
  id="input-colors-tertiary"
  label="Tertiary"
  name="c_tertiary"
  type="text"
  value={nil}
  color="tertiary"
 />
<.dm_input
  id="input-colors-accent"
  label="Accent"
  name="c_accent"
  type="text"
  value={nil}
  color="accent"
 />
<.dm_input
  id="input-colors-info"
  label="Info"
  name="c_info"
  type="text"
  value={nil}
  color="info"
 />
<.dm_input
  id="input-colors-success"
  label="Success"
  name="c_success"
  type="text"
  value={nil}
  color="success"
 />
<.dm_input
  id="input-colors-warning"
  label="Warning"
  name="c_warning"
  type="text"
  value={nil}
  color="warning"
 />
<.dm_input
  id="input-colors-error"
  label="Error"
  name="c_error"
  type="text"
  value={nil}
  color="error"
 />

<.dm_input
  id="input-sizes-xs"
  label="XS Input"
  name="s_xs"
  size="xs"
  type="text"
  value={nil}
 />
<.dm_input
  id="input-sizes-sm"
  label="SM Input"
  name="s_sm"
  size="sm"
  type="text"
  value={nil}
 />
<.dm_input
  id="input-sizes-lg"
  label="LG Input"
  name="s_lg"
  size="lg"
  type="text"
  value={nil}
 />

<.dm_input
  id="input-states-success-state"
  label="Valid Email"
  name="state_success"
  type="text"
  value={nil}
  state="success"
 />
<.dm_input
  id="input-states-warning-state"
  label="Weak Password"
  name="state_warning"
  type="text"
  value={nil}
  state="warning"
 />

<.dm_input
  id="input-single-horizontal"
  label="Username"
  name="h_username"
  type="text"
  value={nil}
  horizontal
 />

<.dm_input
  id="input-single-with-helper"
  label="Email Address"
  name="email_helper"
  type="email"
  value={nil}
  helper="We'll never share your email with anyone."
 />

<.dm_input
  id="input-single-with-errors"
  label="Email"
  name="email_errors"
  type="email"
  value={nil}
  errors={["is not a valid email address", "is required"]}
 />