GroupCollect 1.3.215
- 1.1.0

Simple Form

Renders a form component

Default Open in playground

There's a problem 

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

    My title

    My description

    There's a problem

      This is the header
      <.blank_form_frame id="simple-form-frame">
  <.simple_form id="simple-form-single-full" title="My title" for={%{}}>
    <.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>
    <:header>
      <div>This is the header</div>
    </:header>
    <: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

      There's a problem 

        <.blank_form_frame id="simple-form-frame">
  <.simple_form
    id="simple-form-single-stacked-actions"
    title="Login"
    for={%{}}
    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

        There's a problem 

          <.blank_form_frame id="simple-form-frame">
  <.simple_form
    id="simple-form-single-clustered-actions"
    title="Login"
    for={%{}}
    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

          There's a problem

            This email is not in our database. 

            <.blank_form_frame id="simple-form-frame">
  <.simple_form
    id="simple-form-single-with-errors"
    title="Forgot Password"
    for={%{}}
    actions_layout="cluster"
  >
    <.input
      id="user_email"
      name="email"
      value="ops@groupcollect.com"
      label="Email"
      errors={["This email is not in our database."]}
    />
    <: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

            There's a problem

              Fieldset 1
              Fieldset 2
              Fieldset 3 
              <.blank_form_frame id="simple-form-frame">
  <.simple_form id="simple-form-single-with-fieldsets" title="Form with fieldsets" for={%{}}>
    <: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>
              With message Open in playground

              Form with message

              There's a problem

                Success message

                Announcement message

                Success message with custom icon 

                <.blank_form_frame id="simple-form-frame">
  <.simple_form id="simple-form-single-with-message" title="Form with message" for={%{}}>
    <:message kind={:success}>Success message</:message>
    <:message kind={:error} icon="acorn">Error message with custom icon</:message>
    <:message message="Error message" />
    <:message message={{:announcement, "Announcement message"}} />
    <:message message={{:success, "acorn", "Success message with custom icon"}} />
    <.input name="email" value="ops@gc.com" label="Email"/>
  </.simple_form>
</.blank_form_frame>