GroupCollect 1.3.142

Simple Form

Renders a form component

Default Open in playground 
<.blank_form_frame id="simple-form-frame">
  <.simple_form for={%{id: "default-example"}}>
    <.input name="email" value="ops@gc.com" label="Email"/>
  </.simple_form>
</.blank_form_frame>
Full Open in playground
Go back

My title

My description 
<.blank_form_frame id="simple-form-frame">
  <.simple_form title="My title" for={%{id: "full-example"}}>
    <.input name="email" value="ops@groupcollect.com" label="Email" />
    <.input name="password" value="" label="Password" />
    <:back_button><.a href="/">Go back</.a></:back_button>
    <:description>My description</:description>
    <:actions>
      <.button primary>My action 1</.button>
      <.button>My action 2</.button>
    </:actions>
  </.simple_form>
</.blank_form_frame>
Stacked actions Open in playground
Go back

Login

My description 
<.blank_form_frame id="simple-form-frame">
  <.simple_form title="Login" for={%{id: "stacked-actions-example"}} actions_layout="stack">
    <.input name="email" value="ops@groupcollect.com" label="Email" />
    <:back_button><.a href="/">Go back</.a></:back_button>
    <:description>My description</:description>
    <:actions>
      <.button primary>Submit</.button>
      <.button danger>Cancel</.button>
    </:actions>
  </.simple_form>
</.blank_form_frame>
Clustered actions Open in playground
Go back

Login

My description 
<.blank_form_frame id="simple-form-frame">
  <.simple_form title="Login" for={%{id: "clustered-actions-example"}} actions_layout="cluster">
    <.input name="email" value="ops@groupcollect.com" label="Email" />
    <:back_button><.a href="/">Go back</.a></:back_button>
    <:description>My description</:description>
    <:actions>
      <.button primary>Submit</.button>
      <.button danger>Cancel</.button>
    </:actions>
  </.simple_form>
</.blank_form_frame>
With errors Open in playground
Go back

Forgot Password

My description 
<.blank_form_frame id="simple-form-frame">
  <.simple_form
    title="Forgot Password"
    for={%{id: "user", errors: [email: {"This email is not in our database.", [validation: :required]}]}}
    actions_layout="cluster"
  >
    <.input id="user_email" name="email" value="ops@groupcollect.com" label="Email" />
    <:back_button><.a href="/">Go back</.a></:back_button>
    <:description>My description</:description>
    <:actions>
      <.button primary>Submit</.button>
      <.button danger>Cancel</.button>
    </:actions>
  </.simple_form>
</.blank_form_frame>
With fieldsets Open in playground
Go back

Form with fieldsets

Fieldset 1
Fieldset 2
Fieldset 3 
<.blank_form_frame id="simple-form-frame">
  <.simple_form
    title="Form with fieldsets"
    for={%{id: "user", errors: [email: {"This email is not in our database.", [validation: :required]}]}}
  >
    <:back_button><.a href="/">Go back</.a></:back_button>
    <:fieldset legend="Fieldset 1">
      <.input id="user_name" name="name" value="Ops User" label="Name" />
      <.input id="user_email" name="email" value="ops@groupcollect.com" label="Email" />
    </:fieldset>
    <:fieldset legend="Fieldset 2">
      <.input id="user_name" name="name" value="Ops User" label="Name" />
      <.input id="user_email" name="email" value="ops@groupcollect.com" label="Email" />
    </:fieldset>
    <:fieldset legend="Fieldset 3" hide_legend>
      <.input id="user_name" name="name" value="Ops User" label="Name" />
      <.input id="user_email" name="email" value="ops@groupcollect.com" label="Email" />
    </:fieldset>
    <:actions>
      <.button primary>Submit</.button>
      <.button secondary>Cancel</.button>
    </:actions>
  </.simple_form>
</.blank_form_frame>