@moodxd/component-form NPM

MoO Form

Javascript Dependencies

Inputs

The styles used on these inputs help ensure legibility and usability on any sized screen. .Field-label helps identify what information each input is collecting while the optional .Field-detail gives further instruction when needed.

<!-- Input -->
<div class="Field">
  <label for="field1" class="Field-label">Label for Input</label>
  <input type="text" class="Input" />
  <span class="Field-detail">Detail</span>
</div>

Disabled Input

If an input should not be edited, add .is-disabled to the Field element. This will block any change to the input element's value. The grey background helps illustrate the input's disabled state.

<!-- Disabled Input -->
<div class="Field is-disabled">
  <label for="field1" class="Field-label">Label</label>
  <input type="text" class="Input" disabled />
  <span class="Field-detail">Detail</span>
</div>

Input Validation

Adding .is-invalid to the container will visually mark the child input as invalid with a red tint and also reveal an error message element (denoted by .Field-error).

<!-- Invalid Input -->
<div class="Field is-invalid">
  <label for="field1" class="Field-label">Label</label>
  <input type="text" class="Input" />
  <span class="Field-detail">Detail</span>
  <span class="Field-error">Something is wrong.</span>
</div>

Inline Input

Inputs can be arranged in an inline fashion when required. This is accomplished by using the Arrange Component.

<!-- Inline Input -->
<div class="Field u-cf">
  <div class="Arrange Arrange--middle Arrange--withGutter">
    <div class="Arrange-sizeFit">
      <label for="field1" class="Field-label u-pB0">Label</label>
    </div>
    <div class="Arrange-sizeFill">
      <input type="text" class="Input">
    </div>
    <div class="Arrange-sizeFit">
      <a href="#" class="Button">Submit</a>
    </div>
  </div>
</div>

Inputs with Add-ons

Add-ons can be utilized as visual hints for what type of information is being collected. These can also help focus the amount of information required from the user, such as auto-filling the "http://"" prefix for URLs. .Field-addon surrounds the input element as well as .Field-addon element, which defines the add-on content. Note the placement of .Field-addon in regard to the input field and how the add-on appears in the input.

<!-- Input with Add-on Before -->
<div class="Field u-cf">
  <label for="field1" class="Field-label">Label for Input with Add-on Before</label>
  <div class="Field-addonBox">
    <span class="Field-addon">http://</span>
    <input type="text" class="Input" />
  </div>
  <span class="Field-detail">Detail</span>
</div>

<!-- Input with Add-on After -->
<div class="Field u-cf">
  <label for="field1" class="Field-label">Label for Input with Add-on After</label>
  <div class="Field-addonBox">
    <input type="text" class="Input" />
    <span class="Field-addon">.00</span>
  </div>
  <span class="Field-detail">Detail</span>
</div>

<!-- Input with Add-on Before and After -->
<div class="Field u-cf">
  <label for="field1" class="Field-label">Label for Input with Add-on Before and After</label>
  <div class="Field-addonBox">
    <span class="Field-addon">$</span>
    <input type="text" class="Input" />
    <span class="Field-addon">.00</span>
  </div>
  <span class="Field-detail">Detail</span>
</div>

Inputs with Add-ons, Validation

As with standard input fields, adding .is-invalid to the .Field container will visually mark the input invalid, including the add-ons.

<!-- Invalid Input with Add-on -->
<div class="Field is-invalid u-cf">
  <label for="field1" class="Field-label">Label</label>
  <div class="Field-addonBox">
    <span class="Field-addon">$</span>
    <input type="text" class="Input" />
    <span class="Field-addon">.00</span>
  </div>
  <span class="Field-detail">Detail</span>
</div>

Textareas

<!-- Textarea -->
<div class="Field u-cf">
  <label for="field1" class="Field-label">Label for Textarea</label>
  <textarea class="Textarea"></textarea>
</div>

Radio Buttons

Radio buttons also work similarly to the standard input elements. Simply use .Radio for the label class in lieu of .Field-label to set the appropriate styling.

<div class="Field u-cf">
  <!-- Radio Button -->
  <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
  </label>
</div>

Radio Button Lists

Lists can be created by wrapping radio buttons within a .Field-group container. A list label can also be defined by including a .Field-groupLabel element. To specify an inline list, add the .Field-group--inline modifier to the .Field-group element.

<!-- Radio List -->
<div class="Field u-cf">
  <div class="Field-groupLabel">Where is your pot of gold?</div>
  <div class="Field-group">
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
  </div>
</div>

<!-- Radio List Inline -->
<div class="Field u-cf">
  <div class="Field-groupLabel">Do you like candy?</div>
  <div class="Field-group Field-group--inline">
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
  </div>
</div>

Disabled Radio Button

Just like other form elements, adding .is-disabled to the .Field container will render the input disabled.

<div class="Field is-disabled u-cf">
  <!-- Radio Button -->
  <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
</div>

Radio Button Validation

By adding .is-invalid to the .Field container, the radio button list will be marked as invalid and the .Field-error element will appear.

<div class="Field is-invalid u-cf">
  <div class="Field-groupLabel">Do you like candy?</div>
  <div class="Field-group Field-group--inline">
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
    <!-- Radio Button -->
    <label class="Radio">
      <input type="radio" name="feelings" value="rainbow" role="radio">
      <div class="Radio-span">
          <span class="Radio-select"></span>
      </div>
      <span class="Radio-label">Somewhere over the rainbow</span>
    </label>
  </div>
</div>

Checkboxes

Checkboxes also work similarly to the radio button elements. Simply use .Checkbox for the label class in lieu of .Field-label to set the appropriate styling.

<div class="Field u-cf">
  <!-- Checkbox Button -->
  <label class="Checkbox">
    <input type="checkbox" name="" value="" id="">
    <div class="Checkbox-span">
      <span class="Checkbox-select"></span>
      <span class="Checkbox-label">Checkbox</span>
    </div>
  </label>
</div>

Checkbox Lists

Lists can be created by wrapping checkboxes within a .Field-group container. A list label can also be defined by including a .Field-groupLabel element. To specify an inline list, add the .Field-group--inline modifier to the .Field-group element.

<!-- Checkbox List -->
 <div class="Field u-cf">
    <div class="Field-groupLabel">What colors do you like?</div>
    <div class="Field-group">
        <!-- Checkbox Button -->
        <label class="Checkbox">
            <input type="checkbox" name="list-example-styled" value="" id="">
            <div class="Checkbox-span">
                <span class="Checkbox-select"></span>
            </div>
            <span class="Checkbox-label">Blue</span>
        </label>
        <!-- Checkbox Button -->
        <label class="Checkbox">
            <input type="checkbox" name="list-example-styled" value="" id="">
            <div class="Checkbox-span">
                <span class="Checkbox-select"></span>
            </div>
            <span class="Checkbox-label">Orange</span>
        </label>
    </div>
</div>

<!-- Checkbox List Inline -->
<div class="Field u-cf">
    <div class="Field-groupLabel">What colors do you like?</div>
    <div class="Field-group Field-group--inline">
        <!-- Checkbox Button -->
        <label class="Checkbox">
            <input type="checkbox" name="list-example-styled" value="" id="">
            <div class="Checkbox-span">
                <span class="Checkbox-select"></span>
            </div>
            <span class="Checkbox-label">Blue</span>
        </label>
        <!-- Checkbox Button -->
        <label class="Checkbox">
            <input type="checkbox" name="list-example-styled" value="" id="">
            <div class="Checkbox-span">
                <span class="Checkbox-select"></span>
            </div>
            <span class="Checkbox-label">Orange</span>
        </label>
    </div>
</div>

Disabled Checkboxes

Adding .is-disabled to the .Field container will render the checkbox as disabled.

<div class="Field is-disabled u-cf">
  <!-- Checkbox Button -->
  <label class="Checkbox">
    <input type="checkbox" name="" value="" id="">
    <div class="Checkbox-span">
      <span class="Checkbox-select"></span>
      <span class="Checkbox-label">Checkbox</span>
    </div>
  </label>
</div>

Checkbox Validation

By adding .is-invalid to the .Field container, the checkbox list will be marked as invalid and the .Field-error element will appear.

<div class="Field is-invalid u-cf">
  <!-- Checkbox Button -->
  <label class="Checkbox">
    <input type="checkbox" name="" value="" id="">
    <div class="Checkbox-span">
      <span class="Checkbox-select"></span>
      <span class="Checkbox-label">Checkbox</span>
    </div>
  </label>
  <span class="Field-error">Check this box!</span>
</div>

Select Menus

To apply formatting to a select menu, simply wrap it in a .Field container. Labels of select menus should also receive a .Field-label class. Unlike other form elements, the .Field-label element should not surround the select menu.

<div class="Field u-cf">
  <label class="Field-label" for="">Custom Select Dropdown</label>
  <div class="Select">
    <select id="">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Select Menu Groups

Select menus can be grouped in a similar fashion to radio buttons and checkboxes by wrapping them in a .Field-group element. A .Field-groupLabel can also be added before the .Field-group container. To create a group of inline select menus, add .Field-group--inline to the .Field-group container.

<!-- Select Menu Group -->
<div class="Field u-cf">
  <div class="Field-groupLabel">Select Group Label</div>
  <div class="Field-group">
    <div class="Select">
      <select class="" id="">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
      <span class="Select-arrow"/>
    </div>
    <div class="Select">
      <select class="" id="">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
      <span class="Select-arrow"/>
    </div>
  </div>
</div>

<!-- Select Menu Inline Group -->
<div class="Field u-cf">
  <div class="Field-groupLabel">Select Group Label</div>
  <div class="Field-group Field-group--inline">
    <div class="Select">
      <select class="" id="">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
      <span class="Select-arrow"/>
    </div>
    <div class="Select">
      <select class="" id="">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
      <span class="Select-arrow"/>
    </div>
  </div>
</div>

Disabled Select Menu

<div class="Field is-disabled u-cf">
  <label class="Field-label" for="">Custom Select Dropdown</label>
  <div class="Select">
    <select id="" disabled>
      <option>Can't touch this!</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <span class="Select-arrow"/>
  </div>
</div>

Select Menu Validation

As with all other form elements, adding .is-invalid to the .Field container will mark the select menu as invalid, as well as reveal the .Field-error message.

<div class="Field is-invalid u-cf">
  <label class="Field-label" for="">Custom Select Dropdown</label>
  <span class="Field-error">No Options selected</span>
  <div class="Select">
    <select id="">
      <option>--</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <span class="Select-arrow"/>
  </div>
  <span class="Field-detail">Pick an option, any option...</span>
</div>

Multiselects

Multiselect menus work similarly to select menus. To apply formatting to a multiselect menu, wrap it in a .Field container. Labels of multiselect menus should also receive a .Field-label class. And just like select menus, the .Field-label element should not surround the select menu.

<!-- Multiselect -->
<div class="Field u-cf">
  <label class="Field-label" for="">Multiselect</label>
  <div class="Multiselect">
    <select multiple id="">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Disabled Multiselect

As with other form elements, adding .is-disabled

<div class="Field is-disabled u-cf">
  <label class="Field-label" for="">Disabled Multiselect</label>
  <div class="Multiselect">
    <select multiple disabled id="">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Multiselect Validation

As with all other form elements, adding .is-invalid to the .Field container will mark the select menu as invalid, as well as reveal the .Field-error message.

<div class="Field is-invalid u-cf">
  <label class="Field-label" for="">Invalid Multiselect</label>
  <div class="Multiselect">
    <select multiple id="">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Sentence

Many of our quoters use a sentence style of displaying text and form elements. Using the .Quote-sentence will make the each chunk of text (wrapped in a <span>) and fields inline with each other. Each field should have an unique id for which a custom width property can be set.

<div class="Quote-sentence">
    <span>I am</span>
    <div class="Field">
        <div class="Select">
            <select>
                <option>married</option>
                <option>not married</option>
            </select>
        </div>
    </div>
    <span>, a</span>
    <div class="Field">
        <div class="Select">
            <select>
                <option>Female</option>
                <option>Male</option>
            </select>
        </div>
    </div>
    <span>who is</span>
    <div class="Field">
        <input class="Input" class="52" />
    </div>
    <span>years old. My ZIP code is</span>
    <div class="Field">
        <input class="Input" value="68022" />
    </div>
</div>
<div class="Quote-sentence">
    <span>My partner</span>
    <div class="Field">
        <div class="Select">
            <select>
                <option>is</option>
                <option>is not</option>
            </select>
        </div>
    </div>
    <span>interested in coverage.</span>
</div>
<div class="Quote-sentence">
    <span>I would like my policy to pay a monthly benefit amount of</span>
    <div class="Field">
        <input class="Input" value="$3,000" />
    </div>
</div>

CSS OOCSS PostCSS

@infinitebrahmanuniverse/nolb-_moo

1.0.6-alpha.5334747e

8 years ago

1.0.3

8 years ago