kengai

The bonsai.io app UI guide.

Forms

Inputs

Text input

Construct a form block with a form-group parent, a form-label, an form-input, and, if needed, a form-input-hint for helper text.

Name

Put a name in, yo.

<div class="form-group">
  <div class="form-label">Name</div>
  <input type="text" class="form-input" placeholder="Name">
  <p class="form-input-hint">Put a name in, yo.</p>
</div>

Textarea 

<div class="form-group">
  <label class="form-label">Message</label>
  <textarea class="form-input" placeholder="Message" rows="3"></textarea>
</div>

Select 

<div class="form-group">
  <label for="" class="form-label">Select One</label>
  <select class="form-select">
    <option>Choose an option</option>
    <option>Elasticsearch</option>
    <option>Solr</option>
    <option>Lucene</option>
  </select>
</div>

Radio 

<label class="form-label">Favorite Scientist</label>
<div class="form-group">
  <label class="form-radio">
    <input type="radio" name="scientist" checked>
    <i class="form-icon"></i> Johannes Kepler
  </label>
</div>
<div class="form-group">
  <label class="form-radio">
    <input type="radio" name="scientist">
    <i class="form-icon"></i> Marie Curie
  </label>
</div>
<div class="form-group">
  <label class="form-radio">
    <input type="radio" name="scientist">
    <i class="form-icon"></i> Mae Jemison
  </label>
</div>
<div class="form-group">
  <label class="form-radio">
    <input type="radio" name="scientist">
    <i class="form-icon"></i> Niels Bohr
  </label>
</div>

Checkbox 

<label for="" class="form-label">Select any</label>
<div class="form-group">
  <label class="form-checkbox">
    <input type="checkbox">
    <i class="form-icon"></i> I want this
  </label>
</div>
<div class="form-group">
  <label class="form-checkbox">
    <input type="checkbox" checked>
    <i class="form-icon"></i> and this
  </label>
</div>

Switch 

<div class="form-group">
  <label class="form-switch">
    <input type="checkbox" checked>
    <i class="form-icon"></i> My code loves me.
  </label>
  <label class="form-switch">
    <input type="checkbox">
    <i class="form-icon"></i> My code loves me not.
  </label>
</div>

Groups

Forms should have a form tag with a class "form." They are comprised of many form groups. Each form group requires a label, styled by the "form-label" class, and some input. Or simplest use is the stacked form.

Name
Email
<form class="form {{modifier_class}}">
  <div class="form-group">
    <div class="form-label">Name</div>
    <input type="text" class="form-input" placeholder="Name">
  </div>
  <div class="form-group">
    <div class="form-label">Email</div>
    <input type="email" class="form-input" placeholder="Email">
  </div>
</form>

Types

Inline Form

You can use form-inline as a child of a full-width component (like form or form-group) to make its elements inline in one row.

Name
Email
<form class="form">
  <div class="form-group">
    <div class="form-inline">
      <div class="form-label">Name</div>
      <input type="text" class="form-input" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <div class="form-inline">
      <div class="form-label">Email</div>
      <input type="email" class="form-input" placeholder="Email">
    </div>
  </div>
</form>

Validation

Validation State

has-error

has-success

<div class="form-group {{modifier_class}}">
  <label class="form-label" for="input-example-1">Name</label>
  <input class="form-input" type="text" id="input-example-1" placeholder="...">
  <p class="form-input-hint">{{modifier_class}}</p>
</div>

Disabled Forms

Add the class disabled and/or disabled="true" to the form elements to disable them.

<form action="">
  <fieldset disabled>
    <div class="form-group">
      <label class="form-label" for="input-example-19">Name</label>
      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
    </div>
    <div class="form-group">
      <label class="form-label">Favorite Pet</label>
      <label class="form-radio">
        <input type="radio" name="gender" disabled>
        <i class="form-icon"></i> Cat
      </label>
      <label class="form-radio">
        <input type="radio" name="gender" disabled>
        <i class="form-icon"></i> Border Collies
      </label>
    </div>
    <div class="form-group">
      <select class="form-select" disabled>
        <option>Choose an option</option>
        <option>Slack</option>
        <option>Skype</option>
        <option>Hipchat</option>
      </select>
    </div>
    <div class="form-group">
      <label class="form-switch">
        <input type="checkbox" disabled>
        <i class="form-icon"></i> Send me emails with news and tips
      </label>
    </div>
    <div class="form-group">
      <label class="form-label" for="input-example-20">Message</label>
      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
    </div>
    <div class="form-group">
      <label class="form-checkbox">
        <input type="checkbox" disabled>
        <i class="form-icon"></i> Remember me
      </label>
    </div>
  </fieldset>