h1 Forms
p Similarly to for example simple forms Satis allows for rich forms

pre
  | = sts.form_for(@user, url: documentation_index_path) do |f|
      .grid.grid-cols-12.gap-4
        .col-span-12
          = f.input :name
        .col-span-12
          = f.input :name, collection: ['test', 'test2'], as: :dropdown
        .col-span-12
          = f.input :created_at
        .col-span-12
          = f.submit

= sts.form_for(@user, url: documentation_index_path) do |f|
  .grid.grid-cols-12.gap-4
    .col-span-12
      = f.input :name
    .col-span-12
      = f.input :name, collection: ['test', 'test2'], as: :dropdown
    .col-span-12
      = f.input :created_at
    .col-span-12
      = f.submit

h1 Dropdowns

h2 Dropdowns can come from local-view data

pre
  | = sts.form_for(@user, url: documentation_index_path) do |f|
      .grid.grid-cols-12.gap-4
        .col-span-12
          = f.input :name, collection: ['test', 'test2'], as: :dropdown

= sts.form_for(@user, url: documentation_index_path) do |f|
  .grid.grid-cols-12.gap-4
    .col-span-12
      = f.input :name, collection: ['test', 'test2'], as: :dropdown, input_html:{ id: "dropdown_local" }

h2 Dropdowns can come from remote data

p
  pre
    | = sts.form_for(@user, url: documentation_index_path) do |f|
        .grid.grid-cols-12.gap-4
          .col-span-12
            = f.input :name, url: select_documentation_forms_url, as: :dropdown

p To allow you full control over how the dropdown should look, you will need to implement a bit of view:

pre
  | - @users.each do |user|
      div data-satis-dropdown-item-value=user data-satis-dropdown-item-text=user
        .cursor-pointer.w-full.border-gray-100.rounded-t.border-b.hover:bg-blue-200
          .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.hover:border-teal-100
            .w-full.items-center.flex
              .mx-2.-mt-1
                span = user


= sts.form_for(@user, url: documentation_index_path) do |f|
  .grid.grid-cols-12.gap-4
    .col-span-12
      = f.input :name, url: select_documentation_forms_url, as: :dropdown, input_html:{ id: "dropdown_remote" }

h2 Dropdown search exact match

pre
  | = sts.form_for(@user, url: documentation_index_path) do |f|
      .grid.grid-cols-12.gap-4
        .col-span-12
          = f.input :name, collection: ['test', 'test2'], as: :dropdown, needs_exact_match: true

= sts.form_for(@user, url: documentation_index_path) do |f|
  .grid.grid-cols-12.gap-4
    .col-span-12
      = f.input :name, collection: ['test', 'test2'], as: :dropdown, input_html:{ id: "dropdown_local_exact" }, needs_exact_match: true

h2 Dropdown with free text & pre selected value

pre
  | = sts.form_for(@user, url: documentation_index_path) do |f|
      .grid.grid-cols-12.gap-4
        .col-span-12
          = f.input :name, collection: ['test', 'test2'], as: :dropdown, free_text: true, selected: "test3"

= sts.form_for(@user, url: documentation_index_path) do |f|
  .grid.grid-cols-12.gap-4
    .col-span-12
      = f.input :name, collection: ['test', 'test2'], as: :dropdown, input_html:{ id: "dropdown_local_free_text" }, free_text: true, selected: "test3"

h2 Dropdown with multiple selection

pre
  | = sts.form_for(@user, url: documentation_index_path) do |f|
      .grid.grid-cols-12.gap-4
        .col-span-12
          = f.input :name, collection: ['test1', 'test2', 'test3', 'test4'], as: :dropdown, input_html:{ multiple: true }

= sts.form_for(@user, url: documentation_index_path) do |f|
  .grid.grid-cols-12.gap-4
    .col-span-12
      = f.input :name, collection: ['test1', 'test2', 'test3', 'test4'], as: :dropdown, input_html:{ id: "dropdown_local_multiple", multiple: true }

p
br
br