No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Forms

Svelte Forms - Bootstrap 4 & Material Design

Basic Form

Sign in

Sign in


<script>
  import {MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn} from 'mdbsvelte';
</script>
<MDBContainer>
  <MDBRow>
    <MDBCol md="6">
      <form>
        <p class="h5 text-center mb-4">Sign in</p>
        <div class="grey-text">
          <MDBInput label="Type your email" id="email" icon="envelope" group type="email" validate error="wrong"
                    success="right" />
          <MDBInput label="Type your password" id="password" icon="lock" group type="password" validate />
        </div>
        <div class="text-center">
          <MDBBtn>Login</MDBBtn>
        </div>
      </form>
    </MDBCol>

    <MDBCol md="6">
      <form>
        <p class="h4 text-center mb-4">Sign in</p>
        <label for="defaultFormLoginEmailEx" class="grey-text">
          Your email
        </label>
        <input type="email" id="defaultFormLoginEmailEx" class="form-control" />
        <br />
        <label for="defaultFormLoginPasswordEx" class="grey-text">
          Your password
        </label>
        <input type="password" id="defaultFormLoginPasswordEx" class="form-control" />
        <div class="text-center mt-4">
          <MDBBtn color="indigo" type="submit">Login</MDBBtn>
        </div>
      </form>
    </MDBCol>

  </MDBRow>
</MDBContainer>

Form Register

Sign up

Sign up




<script>
  import {MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn} from 'mdbsvelte';
</script>
<MDBContainer>
  <MDBRow>
    <MDBCol md="6">
      <form>
        <p class="h5 text-center mb-4">Sign up</p>
        <div class="grey-text">
          <MDBInput label="Your name" icon="user" group type="text" validate error="wrong"
                    success="right"/>
          <MDBInput label="Your email" icon="envelope" group type="email" validate error="wrong"
                    success="right"/>
          <MDBInput label="Confirm your email" icon="exclamation-triangle" group type="text" validate
                    error="wrong" success="right"/>
          <MDBInput label="Your password" icon="lock" group type="password" validate/>
        </div>
        <div class="text-center">
          <MDBBtn color="primary">Register</MDBBtn>
        </div>
      </form>
    </MDBCol>
    <MDBCol md="6">
      <form>
        <p class="h4 text-center mb-4">Sign up</p>
        <label for="defaultFormRegisterNameEx" class="grey-text">
          Your name
        </label>
        <input type="text" id="defaultFormRegisterNameEx" class="form-control" />
        <br />
        <label for="defaultFormRegisterEmailEx" class="grey-text">
          Your email
        </label>
        <input type="email" id="defaultFormRegisterEmailEx" class="form-control" />
        <br />
        <label for="defaultFormRegisterConfirmEx" class="grey-text">
          Confirm your email
        </label>
        <input type="email" id="defaultFormRegisterConfirmEx" class="form-control" />
        <br />
        <label for="defaultFormRegisterPasswordEx" class="grey-text">
          Your password
        </label>
        <input type="password" id="defaultFormRegisterPasswordEx" class="form-control" />
        <div class="text-center mt-4">
          <MDBBtn color="unique" type="submit">
            Register
          </MDBBtn>
        </div>
      </form>
    </MDBCol>

  </MDBRow>
</MDBContainer>

Subscription Form

Subscribe

Subscribe


<script>
  import {MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn, MDBIcon} from 'mdbsvelte';
</script>
<MDBContainer>
  <MDBRow>
    <MDBCol md="6">
      <form>
        <p class="h5 text-center mb-4">Subscribe</p>
        <div class="grey-text">
          <MDBInput label="Your name" icon="user" group type="text" validate error="wrong"
                    success="right" />
          <MDBInput label="Your email" icon="envelope" group type="email" validate error="wrong"
                    success="right" />
        </div>
        <div class="text-center">
          <MDBBtn outline color="info">
            Send
            <MDBIcon far icon="paper-plane" class="ml-1" />
          </MDBBtn>
        </div>
      </form>
    </MDBCol>
    <MDBCol md="6">
      <form>
        <p class="h4 text-center py-4">Subscribe</p>
        <label for="defaultFormCardNameEx" class="grey-text font-weight-light">
          Your name
        </label>
        <input type="text" id="defaultFormCardNameEx" class="form-control" />
        <br />
        <label for="defaultFormCardEmailEx" class="grey-text font-weight-light">
          Your email
        </label>
        <input type="email" id="defaultFormCardEmailEx" class="form-control" />
        <div class="text-center py-4 mt-3">
          <MDBBtn class="btn btn-outline-purple" type="submit">
            Send
            <MDBIcon far icon="paper-plane" class="ml-2" />
          </MDBBtn>
        </div>
      </form>
    </MDBCol>
  </MDBRow>
</MDBContainer>

Form With Cards

Sign up

Subscribe


<script>
  import {MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn, MDBIcon, MDBCard, MDBCardBody} from 'mdbsvelte';
</script>
<MDBContainer>
  <MDBRow>
    <MDBCol md="6">
      <MDBCard>
        <MDBCardBody>
          <form>
            <p class="h4 text-center py-4">Sign up</p>
            <div class="grey-text">
              <MDBInput
                label="Your name"
                icon="user"
                group
                type="text"
                validate
                error="wrong"
                success="right"
              />
              <MDBInput
                label="Your email"
                icon="envelope"
                group
                type="email"
                validate
                error="wrong"
                success="right"
              />
              <MDBInput
                label="Confirm your email"
                icon="exclamation-triangle"
                group
                type="text"
                validate
                error="wrong"
                success="right"
              />
              <MDBInput
                label="Your password"
                icon="lock"
                group
                type="password"
                validate
              />
            </div>
            <div class="text-center py-4 mt-3">
              <MDBBtn color="cyan" type="submit">
                Register
              </MDBBtn>
            </div>
          </form>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
    <MDBCol md="6">
      <MDBCard>
        <MDBCardBody>
          <form>
            <p class="h4 text-center py-4">Subscribe</p>
            <label
              for="defaultFormCardNameEx"
              class="grey-text font-weight-light"
            >
              Your name
            </label>
            <input
              type="text"
              id="defaultFormCardNameEx"
              class="form-control"
            />
            <br/>
            <label
              for="defaultFormCardEmailEx"
              class="grey-text font-weight-light"
            >
              Your email
            </label>
            <input
              type="email"
              id="defaultFormCardEmailEx"
              class="form-control"
            />
            <div class="text-center py-4 mt-3">
              <MDBBtn class="btn btn-outline-purple" type="submit">
                Send
                <MDBIcon far icon="paper-plane" class="ml-2"/>
              </MDBBtn>
            </div>
          </form>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  </MDBRow>
</MDBContainer>

Form Gradient

Log in

Forgot Password?

Don't have an account? Sign up

<script>
  import {MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn, MDBIcon, MDBCard, MDBCardBody} from 'mdbsvelte';
</script>
<MDBContainer>
  <MDBRow>
    <MDBCol md="6" class="offset-md-3">
      <MDBCard>
        <div class="header pt-3 peach-gradient">
          <MDBRow class="d-flex justify-content-center">
            <h3 class="white-text mb-3 pt-3 font-weight-bold">
              Log in
            </h3>
          </MDBRow>
          <MDBRow class="mt-2 mb-3 d-flex justify-content-center">
            <a href="#!" class="fa-lg p-2 m-2 fb-ic">
              <MDBIcon fab icon="facebook-f" size="lg" class="white-text" />
            </a>
            <a href="#!" class="fa-lg p-2 m-2 tw-ic">
              <MDBIcon fab class="fa-twitter white-text fa-lg" />
            </a>
            <a href="#!" class="fa-lg p-2 m-2 gplus-ic">
              <MDBIcon fab class="fa-google-plus-g white-text fa-lg" />
            </a>
          </MDBRow>
        </div>
        <MDBCardBody class="mx-4 mt-4">
          <MDBInput label="Your email" group type="text" validate />
          <MDBInput
            label="Your password"
            group
            type="password"
            validate
            containerClass="mb-0"
          />
          <p class="font-small grey-text d-flex justify-content-end">
            Forgot
            <a
              href="#!"
              class="dark-grey-text ml-1 font-weight-bold"
            >
              Password?
            </a>
          </p>
          <MDBRow class="d-flex align-items-center mb-4 mt-5">
            <MDBCol md="5" class="d-flex align-items-start">
              <div class="text-center">
                <MDBBtn
                  color="grey"
                  rounded
                  type="button"
                  class="z-depth-1a"
                >
                  Log in
                </MDBBtn>
              </div>
            </MDBCol>
            <MDBCol md="7" class="d-flex justify-content-end">
              <p class="font-small grey-text mt-3">
                Don't have an account?
                <a
                  href="#!"
                  class="dark-grey-text ml-1 font-weight-bold"
                >
                  Sign up
                </a>
              </p>
            </MDBCol>
          </MDBRow>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  </MDBRow>
</MDBContainer>