Form layout

Basic (Stacked)

Use .c-form-group containing the label and the form elements. A .required class inside .c-form-group shows a astarisk mark.

The stacked layout is recommended for smartphone.

form role="form"
  .c-form-group
    label
      | Username
      i.required
    input type="text" placeholder="Please enter your username"

  .c-form-group
    label
      | Password
      i.required
    input type="password" placeholder="Please enter your password"

  .c-form-group
    label Credit card
    .c-dropdown
      .c-dropdown__body
        a.c-dropdown__toggle data-toggle="dropdown" href="#"
          i.kzicon.kzicon-arrow-down
          | Choose an option
        ul.c-dropdown__menu
          li
            a.c-dropdown__item href="#" VISA
          li
            a.c-dropdown__item href="#" Master
          li
            a.c-dropdown__item href="#" American Express
          li
            a.c-dropdown__item href="#" JCB

  .c-form-group
    label Check your favorite drink
    .c-checkbox
      label
        input type="checkbox"
        span コーヒー
    .c-checkbox
      label
        input type="checkbox"
        span ビール

  .c-form-group
    label Choose your favorite season
    .c-radio.-display-inline
      label
        input type="radio" name="season" checked="checked"
        span 春
    .c-radio.-display-inline
      label
        input type="radio" name="season"
        span 夏
    .c-radio.-display-inline
      label
        input type="radio" name="season"
        span 秋
    .c-radio.-display-inline
      label
        input type="radio" name="season"
        span 冬

  .c-form-group
    label Upload file
    .c-input-file.c-btn--aux
      | Choose a image
      input type="file"

  .c-form-group
    label Comment
    textarea rows="3" placeholder="Enter a comment"

  button.c-btn--primary type="submit" Save and activate

<form role="form">
  <div class="c-form-group">
    <label>Username<i class="required"></i></label><input type="text" placeholder="Please enter your username" />
  </div>
  <div class="c-form-group">
    <label>Password<i class="required"></i></label><input type="password" placeholder="Please enter your password" />
  </div>
  <div class="c-form-group">
    <label>Credit card</label>
    <div class="c-dropdown">
      <div class="c-dropdown__body">
        <a class="c-dropdown__toggle" data-toggle="dropdown" href="#"><i class="kzicon kzicon-arrow-down"></i>Choose an option</a>
        <ul class="c-dropdown__menu">
          <li>
            <a class="c-dropdown__item" href="#">VISA</a>
          </li>
          <li>
            <a class="c-dropdown__item" href="#">Master</a>
          </li>
          <li>
            <a class="c-dropdown__item" href="#">American Express</a>
          </li>
          <li>
            <a class="c-dropdown__item" href="#">JCB</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="c-form-group">
    <label>Check your favorite drink</label>
    <div class="c-checkbox">
      <label><input type="checkbox" /><span>コーヒー</span></label>
    </div>
    <div class="c-checkbox">
      <label><input type="checkbox" /><span>ビール</span></label>
    </div>
  </div>
  <div class="c-form-group">
    <label>Choose your favorite season</label>
    <div class="c-radio -display-inline">
      <label><input type="radio" name="season" checked="checked" /><span>春</span></label>
    </div>
    <div class="c-radio -display-inline">
      <label><input type="radio" name="season" /><span>夏</span></label>
    </div>
    <div class="c-radio -display-inline">
      <label><input type="radio" name="season" /><span>秋</span></label>
    </div>
    <div class="c-radio -display-inline">
      <label><input type="radio" name="season" /><span>冬</span></label>
    </div>
  </div>
  <div class="c-form-group">
    <label>Upload file</label>
    <div class="c-input-file c-btn--aux">
      Choose a image<input type="file" />
    </div>
  </div>
  <div class="c-form-group">
    <label>Comment</label><textarea rows="3" placeholder="Enter a comment"></textarea>
  </div>
  <button class="c-btn--primary" type="submit">Save and activate</button>
</form>

Flexible layout

You can build a flexible form layout with our grid system.

First name

Last name

Tel number

Email address

Message

.c-container--fluid
  .c-row
    .c-col--md-6
      .c-form-group
        label First name
        input type="text" placeholder="Enter your first name"
    .c-col--md-6
      .c-form-group
        label Last name
        input type="text" placeholder="Enter your last name"
  .c-row
    .c-col--md-4
      .c-form-group
        label Tel number
        input type="tel" placeholder="Enter your tel number"
    .c-col--md-8
      .c-form-group
        label Email address
        input type="email" placeholder="Enter your email address"
  .c-row
    .c-col--md-12
      .c-form-group
        label Message
        textarea rows="3" placeholder="Enter your message"

<div class="c-container--fluid">
  <div class="c-row">
    <div class="c-col--md-6">
      <div class="c-form-group">
        <label>First name</label><input type="text" placeholder="Enter your first name" />
      </div>
    </div>
    <div class="c-col--md-6">
      <div class="c-form-group">
        <label>Last name</label><input type="text" placeholder="Enter your last name" />
      </div>
    </div>
  </div>
  <div class="c-row">
    <div class="c-col--md-4">
      <div class="c-form-group">
        <label>Tel number</label><input type="tel" placeholder="Enter your tel number" />
      </div>
    </div>
    <div class="c-col--md-8">
      <div class="c-form-group">
        <label>Email address</label><input type="email" placeholder="Enter your email address" />
      </div>
    </div>
  </div>
  <div class="c-row">
    <div class="c-col--md-12">
      <div class="c-form-group">
        <label>Message</label><textarea rows="3" placeholder="Enter your message"></textarea>
      </div>
    </div>
  </div>
</div>

Horizontal layout (with Flexbox Layout)

First name

Last name

.c-form-group--flexbox
  .c-form-group--flexbox-row
    input.-size-compact type="text" placeholder="Enter your first name"
  // Buttons are always shrink
  button.c-btn--primary type="submit" Save

.c-form-group--flexbox
  .c-form-group--flexbox-row
    label First name
    input.-size-compact type="text" placeholder="Enter your first name"
  // You can add a shrink option
  .c-form-group--flexbox-row.-shrink
    label Last name
    input.-size-compact type="text" placeholder="Enter your last name"
  button.c-btn--primary type="submit" Save

<div class="c-form-group--flexbox">
  <div class="c-form-group--flexbox-row">
    <input class="-size-compact" type="text" placeholder="Enter your first name" />
  </div>
  <button class="c-btn--primary" type="submit">Save</button>
</div>
<div class="c-form-group--flexbox">
  <div class="c-form-group--flexbox-row">
    <label>First name</label><input class="-size-compact" type="text" placeholder="Enter your first name" />
  </div>
  <div class="c-form-group--flexbox-row -shrink">
    <label>Last name</label><input class="-size-compact" type="text" placeholder="Enter your last name" />
  </div>
  <button class="c-btn--primary" type="submit">Save</button>
</div>

Inline layout

Do you need it?