• welcome
  • faqs
  • principle
  • semantic
  • tokens
  • components
  • theming
  • typography
  • colors
  • badge
  • button
  • calendar
  • cards
  • checkbox
  • input
  • list
  • message
  • pagination
  • panel
  • segments
  • selectbox
  • switch
  • table
  • tabs
  • tag
  • form
  • grid
  • grid2
  • modal
  • toast

    • Form

    레이블, 검증, 레이아웃이 포함된 그룹형 폼 구조.

    Base

    Form

    form is very important element in HTML.

    Help text
    Error text
    
<form class="ga-form">
  <div class="head">
    <!-- header contents -->
  </div>
  <div class="fields">
    <div class="field">
      <!-- form contents(label, input ...) -->
    </div>
  </div> 
  <div class="divider" />
</form>

    Form Header

    Form
    Form description is important element attrebute. 
    
<form class="ga-form">
  <div class="head">
    <div class="title">Form Title</div>
    <div class="desc">Form description</div>
  </div>
  ... ...
</form>

    Filed

    Help text
    Error text
    
<form class="ga-form">
  <div class="filed">
    <label for="name"> label
    <input name="name" />
    <!-- helper text -->
    <div class="help-text">help text</div>
    <!-- error text -->
    <div class="error-text">error text</div>
  </div>
</form>

    Inline field

    Help text
    
<form class="ga-form">
  <div class="field inline">
    <!-- form contents(label, input ...) -->
  </div>
</form>

    Label

    
<form class="ga-form">
  <div class="filed">
    <!-- no use label -->
    <input name="name" />
  </div>
  <div class="filed">
    <!-- use label -->
    <label for="name"> label
    <input name="name" />
  </div>
  <!-- use form grid -->
  <div class="fields grid">
    <div class="field column span-3">
      <label for="name"> label
    </div>
    <div class="field column span-9">
      <input name="name" />
    </div>
  </div> 
</form>

    Display required

    
<form class="ga-form">
  <div class="filed">
    <!-- class required -->
    <label for="name" class="required"> label
    <input name="name" />
  </div>
  <div class="filed">
    <!-- use label -->
    <label for="name" required> label
    <input name="name" />
  </div>
</form>

    Fields

    Field Title
    
<form class="ga-form">
  <div class="fields">
    <div class="legend">Field title</div>
    <div class="field">
      <input type="text">
    </div>
    <div class="field">
      <input type="text">
    </div>
    <div class="field">
      <input type="text">
    </div>
  </div>
</form>

    Disabled Field

    
<form class="ga-form">
  <div class="field disabled">
    <!-- form contents(label, input ...) -->
  </div>
</form>

    Fields Divide

    Divide-2
    Divide-4
    
<!-- @divide:  2|4|6|8|10 -->
<form class="ga-form">
  <div class="fields grid divide-{@divide}">
    <div class="field column">
      <input type="text">
    </div>
    <div class="field column">
      <input type="text">
    </div>
    ... ...
    <div class="field column">
      <input type="text">
    </div>
  </div>
</form>

    Fields grids

    
<!-- sum of num < 12 in row -->
<form class="ga-form">
  <div class="fields grid">
    <div class="field column span-{num}">
      <input type="text">
    </div>
    <div class="field column span-{num}">
      <input type="text">
    </div>
    ... ...
    <div class="field column span-{num}">
      <input type="text">
    </div>
  </div>
</form>

    Text Area

    
<!-- Normal -->
<form class="ga-form">
  <div class="field">
    <label>label</label>
    <textarea />
  </div>
</form>
 <!-- Short -->
<form class="ga-form">
  <div class="field short">
    <label>label</label>
    <textarea />
  </div>
</form>

    Extra

    help
    
<form class="ga-form">
  <!-- something form element field -->
  <div class="field">
    <label>label</label>
    <input />
    <div class="extra">
      <div class="ga-checkbox">
        <input type="checkbox" />
        <label>label</label>
      </div>
    </div>
  </div>
</form>

    Checkboxes & Radios

    Select all transportation you want?
    Bus
    What is the right thing to do when an issue?
    
<form class="ga-form">
  <div class="fields">
    <div class="field {inline | none}">
      <div class="ga-checkbox radio">
        <input type="radio" name="radios" />
        <label>label</label>
      </div>
      <div class="ga-checkbox radio">
        <input type="radio" name="radios" />
        <label>label</label>
      </div>
      <div class="ga-checkbox radio">
        <input type="radio" name="radios" />
        <label>label</label>
      </div>
    </div>
  </div>
</form>

    Select Box

    
<form class="ga-form">
  <div class="fields">
    <div class="field">
      <div class="ga-select-box">
        <select />
      </div>
    </div>
  </div>
</form>