OpenGov Visual Interface Documentation

Forms

Form groups

Ovid ignores parent <form> and requires you to add .ui-form on the parent element of form field groups. Conventionally, the parent element will be <fieldset> which will contain a <label> and some kind of <input>. placeholders usually answer the question "for example?" and should only be used for text that is not essential (they're not supported in IE8). .hint can provide additional information to help the user fill out the field. fieldsets will always have a .hint, even if there is no hint content.

This should be your current company.

.required

Required

This should be your current company.

<fieldset class="ui-form [modifier class]">
  <label>Company name</label>
  <input type="text" placeholder="e.g., OpenGov">
  <p class="hint">This should be your current company.</p>
</fieldset>
<fieldset class="ui-form [modifier class]">
  <label>
    Job description
    <span class="hint">0/200 characters</span>
  </label>
  <textarea></textarea>
  <p class="hint"></p>
</fieldset>

Inputs

.short

Short field

.shorter

Shorter field

.shortest

Shortest field 
<input type="text" class="[modifier class]" placeholder="Text input">

Prefix input

This 
<fieldset class="ui-form">
  <span class="prefix">This</span>
  <input type="text" placeholder="That">
</fieldset>

Textareas

.tall

Taller textarea 
<textarea class="[modifier class]" placeholder="Textarea"></textarea>

Selects 

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Grid forms

You can use the grid to layout forms.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.

<fieldset class="ui-form">
  <div class="ui-row">
    <div class="ui-col-3of6">
      <select>
        <option>Jan.</option>
      </select>
    </div>
    <div class="ui-col-3of6">
      <input type="number">
    </div>
  </div>
  <p class="hint">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
</fieldset>

Radio buttons

Standard form components, except with that Ovid sheen.

<fieldset class="ui-form">
  <label class="ui-form__radio-label">
    <input type="radio" name="radio-1" checked="checked"> This is a radio button
  </label>
  <label class="ui-form__radio-label">
    <input type="radio" name="radio-1"> This is a radio button
  </label>
</fieldset>

Checkboxes

Standard form components, except with that Ovid sheen. Checkboxes can use the semantic input[type="checkbox"] tag, or unsemantic divs. Default condition is unchecked. The component doesn't have support for intermediate attributes on semantic checkboxes; the feature is not supported in IE8.

.is-checked

Checked

.is-intermediate

Partially checked 
<!-- Semantic markup -->
<fieldset class="ui-form">
  <label class="ui-form__checkbox-label">
    <input type="checkbox" checked> This is a checkbox
  </label>
</fieldset>
<!-- Non-semantic markup -->
<div class="ui-form">
  <label class="ui-form__checkbox-label">
    <div class="ui-form__checkbox [modifier class]"></div> This is a non-semantic checkbox
  </label>
</div>

Toggle switch

Toggle switches are a great visual representation of a boolean option. They allow the user to toggle state between two choices with an engaging analog that's been made popular by iOS.

Toggle state

.is-true

"On" state
Toggle state

.small

Smaller size
Toggle state

.disabled

Disabled
Toggle state 
<fieldset class="ui-form">
  <label>Is this thing on?</label>
  <div class="ui-toggle [modifier class]">
    <div class="ui-toggle__handle"></div>
  </div>
  <span class="ui-toggle__label">Toggle state</span>
</fieldset>

Invalid

Let people know they've messed up, how they've messed up, and what they can do to fix it. There's some extra complexity here for Rails' Simple Form gem, which we can remove when we no longer serve views from Dapp.

Whoops, you need to specify the velocity of a swallow

Whoops, you need to specify the velocity of a swallow

<fieldset class="ui-form whoops">
  <label>What is the airspeed velocity of a swallow?</label>
  <input type="text" placeholder="OpenGov" value="An African or European swallow?">
  <p class="hint">Whoops, you need to specify the velocity of a swallow</p>
</fieldset>
<!-- Simplified Simple Forms markup -->
<fieldset class="ui-form">
  <label>What is the airspeed velocity of a swallow?</label>
  <input type="text" class="error" placeholder="OpenGov" value="An African or European swallow?">
  <p class="hint whoops">Whoops, you need to specify the velocity of a swallow</p>
</fieldset>
<fieldset class="ui-form">
  <label>What is the airspeed velocity of a swallow?</label>
  <select class="error">
    <option>I don't know</option>
    <option>Do you mean African or European swallow?</option>
  </select
</fieldset>

Dropdowns

.ui-dropdowns make a dropdown-type interaction possible. The dropdown target can be filled with any component, but it's expecting a select-menu. The dropdown target defaults to a left alignment, but it can have a right or top alignment.

Click

Dropdown

Click
Click
Click

.align-right

Align dropdown to the right
Click

Dropdown

Click
Click
Click

.align-top

Align dropdown to the top of the toggle (a dropup)
Click

Dropdown

Click
Click
Click 
<div class="ui-dropdown">
  <a class="ui-dropdown__toggle ui-button">Click</a>
  <div class="ui-dropdown__target [modifier class]">
    <header class="ui-dropdown__header">
      <h4>Dropdown</h4>
    </header>
    <ul class="ui-dropdown__list">
      <li><a href="#">Item one</a></li>
      <li><a href="#">Item two</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
    </ul>
  </div>
</div>
<div class="ui-dropdown">
  <a class="ui-dropdown__toggle">Click</a>
  <div class="ui-dropdown__target [modifier class]">
    <ul class="ui-dropdown__list">
      <li><a href="#">Item one</a></li>
      <li><a href="#">Item two</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
    </ul>
    <ul class="ui-dropdown__list">
      <li><a href="#">Item one</a></li>
      <li><a href="#">Item two</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
    </ul>
    <footer class="ui-dropdown__footer">
      <a class="ui-dropdown__action">Cancel</a>
      <a class="ui-dropdown__action">Okay</a>
    </footer>
  </div>
</div>
<div class="ui-dropdown">
  <a class="ui-dropdown__toggle ghost">Click</a>
  <div class="ui-dropdown__target"></div>
</div>
<div class="ui-dropdown disabled">
  <a class="ui-dropdown__toggle">Click</a>
  <div class="ui-dropdown__target"></div>
</div>

Multiline dropdown

Sometimes your dropdown items need descriptions

Title Donec congue lacinia dui, a porttitor. 
<div class="ui-dropdown multiline">
  <a class="ui-dropdown__toggle">
    <strong>Title</strong>
    <small>Donec congue lacinia dui, a porttitor.</small>
  </a>
  <div class="ui-dropdown__target">
    <ul class="ui-dropdown__list">
      <li>
        <a href="#">
          <strong>Item one</strong>
          <small>Nulla facilisi. Duis aliquet egestas purus.</small>
        </a>
      </li>
      <li>
        <a href="#">
          <strong>Item two</strong>
          <small>Nulla facilisi. Duis aliquet egestas purus.</small>
        </a>
      </li>
      <li>
        <a href="#">
          <strong>Item three</strong>
          <small>Nulla facilisi. Duis aliquet egestas purus.</small>
        </a>
      </li>
    </ul>
  </div>
</div>

Dropdown toggle

Click
  • Make it so
  • Engage
<div class="ui-dropdown">
  <a class="ui-dropdown__toggle">Click</a>
  <div class="ui-dropdown__target">
    <ul class="ui-dropdown__list">
      <li class="ui-dropdown__item_toggle">
        <div class="ui-toggle__wrapper">
        <div class="ui-toggle is-true small">
          <div class="ui-toggle__handle"></div>
        </div>
        <div class="ui-toggle__label">Make it so</div>
        </div>
      </li>
      <li class="ui-dropdown__item_toggle">
        <div class="ui-toggle__wrapper">
        <div class="ui-toggle small">
          <div class="ui-toggle__handle"></div>
        </div>
        <div class="ui-toggle__label">Engage</div>
        </div>
      </li>
    </ul>
  </div>
</div>

Search

.small

Search with less height 
<div class="ui-search [modifier class]">
  <span class="icon-search-1"></span>
  <input type="search" placeholder="Search by name, location, or keyword">
</div>

Search dropdown

Search results for "deb"
See all results 
<div class="ui-search ui-flex-column">
  <span class="icon-search-1"></span>
  <input type="search" placeholder="Search by name, location, or keyword" value="deb">
  <div class="ui-search__dropdown">
    <header class="ui-search__header">
      <small>Search results for "deb"</small>
    </header>
    <ul class="ui-search__results">
      <li>
        <a class="ui-search__results__item">
          <span class="ui-search__results__title">Debt Service Funds</span>
          <small class="ui-search__results__type">Fund Type</small>
        </a>
      </li>
      <li>
        <a class="ui-search__results__item">
          <span class="ui-search__results__title">Hotel Occupancy Tax Debt SVC</span>
          <small class="ui-search__results__type">Funds</small>
        </a>
      </li>
      <li>
        <a class="ui-search__results__item">
          <span class="ui-search__results__title">Debt Service Bonded Debt that has a really long title that's sure to wrap</span>
          <small class="ui-search__results__type">Department</small>
        </a>
      </li>
      <li>
        <a class="ui-search__results__item">
          <span class="ui-search__results__title">Debt Service Agents Fee</span>
          <small class="ui-search__results__type">Really long fund title which will wrap</small>
        </a>
      </li>
      <li>
        <a class="ui-search__results__item">
          <span class="ui-search__results__title">Debt Interest</span>
        </a>
      </li>
    </ul>
    <a class="ui-search__footer">See all results</a>
  </div>
</div>

Search with Button 

<div class="ui-search">
  <span class="icon-search-1"></span>
  <input type="search" placeholder="Search by name, location, or keyword">
  <button class="ui-button primary">New Enity</button>
</div>

Tooltip hint labels

CSS-only hint tooltips. The value of data-hint will be the display text. You can control the position of the tooltip relative to is parent also including data-hint-position and data-hint-align keys. By default, tooltips position and align top and left. Warning Don't use -position="left/right" with -align="right" (consider changing the syntax to -poisition="top right"). Source

This text has a tooltip. Tooltips can be shorter too!

data-hint-position="bottom"

Bottom tooltip

This text has a tooltip. Tooltips can be shorter too!

data-hint-position="left"

Left tooltip

This text has a tooltip. Tooltips can be shorter too!

data-hint-position="right"

Right tooltip

This text has a tooltip. Tooltips can be shorter too!

data-hint-align="right"

Right tooltip

This text has a tooltip. Tooltips can be shorter too!

<p><a data-hint="Tooltips tell you more about the thing you are hovering over" [modifier class]>This text has a tooltip.</a>
Tooltips can be <a data-hint="One word" [modifier class]>shorter</a> too!</p>

Select list

Functions like a group of radio button options

<ul class="ui-select-list">
  <li>
    <a class="ui-select-list__item is-selected">
      Item 1
      <span class="ui-select-list__item__arrow"></span>
    </a>
  </li>
  <li>
    <a class="ui-select-list__item">
      Item 2
      <span class="ui-select-list__item__arrow"></span>
    </a>
  </li>
  <li>
    <a class="ui-select-list__item">Item 3</a>
  </li>
  <li>
    <a class="ui-select-list__item disabled">Item 3 (disabled)</a>
  </li>
  <li>
    <a class="ui-select-list__item disabled is-selected">Item 3 (disabled and selected)</a>
  </li>
  <li>
    <label class="ui-select-list__item ui-form__radio-label is-selected">
      <input type="radio" name="radio-1"> This is a radio button
    </label>
  </li>
  <li>
    <label class="ui-select-list__item ui-form__radio-label">
      <input type="radio" name="radio-1"> This is a radio button
    </label>
  </li>
</ul>

Slider

A slider is a horizontal component that allows the user to set a value (or a range of values) based on visual input. This component can be used in three configurations: single handle, single handle with range, double handle with range. Requires JS to inline widths/positions of elements.

2009
2009
2006
2012
2006
2012 
<!-- Single handle, without a clickable label-->
<div class="ui-slider">
  <div class="ui-slider__handle" style="left: 50%;">
    <div class="ui-slider__handle__label">2009</div>
  </div>
</div>
<!-- Single handle, with range -->
<div class="ui-slider">
  <div class="ui-slider__handle" style="left: 50%;">
    <span class="ui-slider__handle__label">2009</span>
  </div>
  <div class="ui-slider__range" style="width: 50%; left: 0;"></div>
</div>
<!-- Double handle, with range -->
<div class="ui-slider">
  <div class="ui-slider__handle" style="left: 25%;">
    <span class="ui-slider__handle__label">2006</span>
  </div>
  <div class="ui-slider__handle" style="left: 75%;">
    <span class="ui-slider__handle__label">2012</span>
  </div>
  <div class="ui-slider__range" style="width: 50%; left: 25%;"></div>
</div>
<!-- Double handle, with overlapping handles -->
<div class="ui-slider is-overlapping">
  <div class="ui-slider__handle" style="left: 49%;">
    <span class="ui-slider__handle__label">2006</span>
  </div>
  <div class="ui-slider__handle" style="left: 51%;">
    <span class="ui-slider__handle__label">2012</span>
  </div>
  <div class="ui-slider__range" style="width: 2%; left: 49%;"></div>
</div>

Datepicker

React implementation of Datepicker for Bootstrap.

September 2014
Su Mo Tu We Th Fr Sa
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
2014
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 
<div class="ui-dropdown__target ui-datepicker__wrapper">
  <div class="ui-datepicker">
    <table>
      <thead>
        <tr class="ui-datepicker__pagination">
          <th class="icon-left-1"></th>
          <th colSpan="5">September 2014</th>
          <th class="icon-right-1"></th>
        </tr>
        <tr>
          <th class="ui-datepicker__dow">Su</th>
          <th class="ui-datepicker__dow">Mo</th>
          <th class="ui-datepicker__dow">Tu</th>
          <th class="ui-datepicker__dow">We</th>
          <th class="ui-datepicker__dow">Th</th>
          <th class="ui-datepicker__dow">Fr</th>
          <th class="ui-datepicker__dow">Sa</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="ui-datepicker__day old">29</td>
          <td class="ui-datepicker__day old">30</td>
          <td class="ui-datepicker__day old">31</td>
          <td class="ui-datepicker__day active">1</td>
          <td class="ui-datepicker__day">2</td>
          <td class="ui-datepicker__day">3</td>
          <td class="ui-datepicker__day">4</td>
        </tr>
        <tr>
          <td class="ui-datepicker__day">5</td>
          <td class="ui-datepicker__day">6</td>
          <td class="ui-datepicker__day">7</td>
          <td class="ui-datepicker__day">8</td>
          <td class="ui-datepicker__day">9</td>
          <td class="ui-datepicker__day">10</td>
          <td class="ui-datepicker__day">11</td>
        </tr>
        <tr>
          <td class="ui-datepicker__day">12</td>
          <td class="ui-datepicker__day">13</td>
          <td class="ui-datepicker__day">14</td>
          <td class="ui-datepicker__day">15</td>
          <td class="ui-datepicker__day">16</td>
          <td class="ui-datepicker__day">17</td>
          <td class="ui-datepicker__day">18</td>
        </tr>
        <tr>
          <td class="ui-datepicker__day">19</td>
          <td class="ui-datepicker__day">20</td>
          <td class="ui-datepicker__day">21</td>
          <td class="ui-datepicker__day">22</td>
          <td class="ui-datepicker__day">23</td>
          <td class="ui-datepicker__day">24</td>
          <td class="ui-datepicker__day">25</td>
        </tr>
        <tr>
          <td class="ui-datepicker__day">26</td>
          <td class="ui-datepicker__day">27</td>
          <td class="ui-datepicker__day">28</td>
          <td class="ui-datepicker__day">29</td>
          <td class="ui-datepicker__day">30</td>
          <td class="ui-datepicker__day new">1</td>
          <td class="ui-datepicker__day new">2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="ui-dropdown__target ui-datepicker__wrapper">
  <div class="ui-datepicker">
    <table>
      <thead>
        <tr class="ui-datepicker__pagination">
          <th class="icon-left-1"></th>
          <th colSpan="5">2014</th>
          <th class="icon-right-1"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
         <td colSpan="7">
           <span class="ui-datepicker__month">Jan</span>
           <span class="ui-datepicker__month">Feb</span>
           <span class="ui-datepicker__month">Mar</span>
           <span class="ui-datepicker__month">Apr</span>
           <span class="ui-datepicker__month">May</span>
           <span class="ui-datepicker__month">Jun</span>
           <span class="ui-datepicker__month">Jul</span>
           <span class="ui-datepicker__month old">Aug</span>
           <span class="ui-datepicker__month active">Sep</span>
           <span class="ui-datepicker__month">Oct</span>
           <span class="ui-datepicker__month">Nov</span>
           <span class="ui-datepicker__month">Dec</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>