@momentum-ui/react-collaboration/scss/components/input/examples/kitchen-sink.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class="row" style="padding: 1rem;">
  <div class="md-input-container columns small-12 md-success">
    <label class="md-label md-input__label" for="inputSuccess0">
      <span>Success</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputSuccess0" name="inputSuccess0" value="Error Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">
        This is where the success message would be.
        This is where the success message would be.
        This is where the success message would be.
        This is where the success message would be.
        This is where the success message would be.
      </div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-success">
    <label class="md-label md-input__label" for="inputSuccess1"><span>Success</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputSuccess1" name="inputSuccess1" value="Success Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the success message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-error">
    <label class="md-label md-input__label" for="inputError1"><span>Error</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputError1" name="inputError1" value="Error Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the error message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-warning">
    <label class="md-label md-input__label" for="inputWarning1"><span>Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputWarning1" name="inputWarning1" value="Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-warning">
    <label class="md-label md-input__label" for="inputDoubleWarning1"><span>Double Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputDoubleWarning1" name="inputDoubleWarning1" value="Double Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="default1"><span>Default</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="default1" name="default1" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="defaultPill1"><span>Pill</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--pill md-active" tabindex="0" type="text" id="defaultPill1" name="defaultPill1" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="Multiline1"><span>Multiline</span>
    </label>
    <div class="md-input__wrapper">
      <textarea class="md-input md-input--multiline" tabindex="0" type="text" id="Multiline1" name="Multiline1"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container small-6 columns md-input--nested-1">
      <label class="md-label md-input__label" for="nested1"><span>Nested 1</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="nested1" name="nested1" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container small-6 columns md-input--nested-2">
      <label class="md-label md-input__label" for="nested21"><span>Nested 2</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="nested21" name="nested21" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container small-6 columns md-input--nested-3">
      <label class="md-label md-input__label" for="nested31"><span>Nested 3</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="nested31" name="nested31" value="">
      </div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-read-only">
    <label class="md-label md-input__label" for="readOnly1"><span>Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-dirty" tabindex="0" type="text" id="readOnly1" name="readOnly1" readonly="" value="With Placeholder">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="disabled1"><span>Disabled</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="disabled1" name="disabled1" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="disabledWithValue1"><span>Disabled Value</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled md-dirty" tabindex="0" type="text" disabled="" id="disabledWithValue1" name="disabledWithValue1" value="With Value">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-read-only md-disabled">
    <label class="md-label md-input__label" for="disabledro1"><span>Disabled Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-disabled md-dirty" tabindex="0" type="text" disabled="" id="disabledro1" name="disabledro1" readonly="" value="Disabled ReadOnly Input">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="placeholder1"><span>Placeholder</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="placeholder1" name="placeholder1" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="clearInput1"><span>Clear</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after md-dirty" tabindex="0" type="text" id="clearInput1" name="clearInput1" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input"><span class="md-input__after"><button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="rightIcon1"><span>Right Icon</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after" tabindex="0" type="text" id="rightIcon1" name="rightIcon1" placeholder="Placeholder Text" value=""><span class="md-input__after"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="leftIcon1"><span>Left Icon</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="leftIcon1" name="leftIcon1" placeholder="Placeholder Text" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="leftIconDisabled1"><span>Left Icon Disabled</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before md-disabled" tabindex="0" type="text" disabled="" id="leftIconDisabled1" name="leftIconDisabled1" placeholder="Placeholder Text" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="clearLeftIcon1"><span>Clear and Left Icon</span>
    </label>
    <div class="md-input__wrapper">
      <span class="md-input__before">
        <i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i>
      </span>
      <input class="md-input md-input--before md-input--after md-active md-dirty" tabindex="0" type="text" id="clearLeftIcon1" name="clearLeftIcon1" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input">
      <span class="md-input__after">
        <button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="help1"><span>Help Text</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="help1" name="help1" placeholder="With Placeholder" value="">
    </div>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container columns small-12">
    <label class="md-label md-input__label" for="longHelp1">
      <span>Long Help Text</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="longHelp1" name="longHelp1" placeholder="With Placeholder" value="">
    </div>
    <div class="md-input__help-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nullam et quam id ipsum ultrices gravida.
    Donec tempor mattis erat, at suscipit ligula.
    Nullam nec dui laoreet, tempor justo sed, consequat sapien.
    Suspendisse eget odio id eros feugiat sollicitudin id vel eros.
    Nunc mattis ac ligula sit amet consequat.
    Etiam semper felis blandit enim dignissim, a semper diam viverra.
    Praesent quis vehicula libero. Curabitur ut semper lorem, vel iaculis ex.
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="inputSecondaryLabel1"><span>Secondary Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="inputSecondaryLabel1" name="inputSecondaryLabel1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputSecondaryLabel1"><span>Secondary Label</span>
    </label>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="inputDisabledSecondaryLabel1"><span>Disabled Secondary Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="inputDisabledSecondaryLabel1" name="inputDisabledSecondaryLabel1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputDisabledSecondaryLabel1"><span>Secondary Label</span>
    </label>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="inputSecondaryHelpLabel1"><span>Secondary/Help Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="inputSecondaryHelpLabel1" name="inputSecondaryHelpLabel1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputSecondaryHelpLabel1"><span>Secondary Label</span>
    </label>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="inputSecondaryHelpLabelDisabled1"><span>Disabled Secondary/Help Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="inputSecondaryHelpLabelDisabled1" name="inputSecondaryHelpLabelDisabled1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputSecondaryHelpLabelDisabled1"><span>Secondary Label</span>
    </label>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-success">
    <label class="md-label md-input__label" for="filledInputSuccess1"><span>Filled Success</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputSuccess1" name="FilledInputSuccess1" value="Success Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the success message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-error">
    <label class="md-label md-input__label" for="filledInputError1"><span>Filled Error</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputError1" name="FilledInputError1" value="Error Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the error message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-warning">
    <label class="md-label md-input__label" for="filledInputWarning1"><span>Filled Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputWarning1" name="FilledInputWarning1" value="Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-warning">
    <label class="md-label md-input__label" for="filledInputDoubleWarning1"><span>Filled Double Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputDoubleWarning1" name="FilledInputDoubleWarning1" value="Double Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filleddefault1"><span>Filled Default</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-active" tabindex="0" type="text" id="filleddefault1" name="Filleddefault1" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledDefaultPill1"><span>Filled Pill</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--pill" tabindex="0" type="text" id="filledDefaultPill1" name="FilledDefaultPill1" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledMultiline1"><span>Filled Multiline</span>
    </label>
    <div class="md-input__wrapper">
      <textarea class="md-input md-input--multiline" tabindex="0" type="text" id="filledMultiline1" name="FilledMultiline1"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container md-input--filled small-6 columns md-input--nested-1">
      <label class="md-label md-input__label" for="filledNested1"><span>Filled Nested 1</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="filledNested1" name="FilledNested1" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container md-input--filled small-6 columns md-input--nested-2">
      <label class="md-label md-input__label" for="filledNested21"><span>Filled Nested 2</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="filledNested21" name="FilledNested21" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container md-input--filled small-6 columns md-input--nested-3">
      <label class="md-label md-input__label" for="filledNested31"><span>Filled Nested 3</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="filledNested31" name="FilledNested31" value="">
      </div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-read-only">
    <label class="md-label md-input__label" for="filledReadOnly1"><span>Filled Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-dirty" tabindex="0" type="text" id="filledReadOnly1" name="FilledReadOnly1" readonly="" value="With Placeholder">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledDisabled1"><span>Filled Disabled</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="filledDisabled1" name="FilledDisabled1" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledDisabledWithValue1"><span>Filled Disabled Value</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled md-dirty" tabindex="0" type="text" disabled="" id="filledDisabledWithValue1" name="FilledDisabledWithValue1" value="With Value">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-read-only md-disabled">
    <label class="md-label md-input__label" for="filledDisabledro1"><span>Filled Disabled Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-disabled md-dirty" tabindex="0" type="text" disabled="" id="filledDisabledro1" name="FilledDisabledro1" readonly="" value="Disabled ReadOnly Input">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledPlaceholder1"><span>Filled Placeholder</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="filledPlaceholder1" name="FilledPlaceholder1" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledClearInput1"><span>Filled Clear</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after md-dirty" tabindex="0" type="text" id="filledClearInput1" name="FilledClearInput1" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input"><span class="md-input__after"><button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledRightIcon1"><span>Filled Right Icon</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after" tabindex="0" type="text" id="filledRightIcon1" name="FilledRightIcon1" placeholder="Placeholder Text" value=""><span class="md-input__after"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledLeftIcon1"><span>Filled Left Icon</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="filledLeftIcon1" name="FilledLeftIcon1" placeholder="Placeholder Text" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledLeftIconDisabled1"><span>Filled Left Icon Disabled</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before md-disabled" tabindex="0" type="text" disabled="" id="filledLeftIconDisabled1" name="FilledLeftIconDisabled1" placeholder="Placeholder Text" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledClearLeftIcon1"><span>Filled Clear and Left Icon</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before md-input--after md-dirty" tabindex="0" type="text" id="filledClearLeftIcon1" name="FilledClearLeftIcon1" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input"><span class="md-input__after"><button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledHelp1"><span>Filled Help Text</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="filledHelp1" name="FilledHelp1" placeholder="With Placeholder" value="">
    </div>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledInputSecondaryLabel1"><span>Filled Secondary Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="filledInputSecondaryLabel1" name="FilledInputSecondaryLabel1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="filledInputSecondaryLabel1"><span>Secondary Label</span>
    </label>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledInputDisabledSecondaryLabel1"><span>Filled Disabled Secondary Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="filledInputDisabledSecondaryLabel1" name="FilledInputDisabledSecondaryLabel1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="filledInputDisabledSecondaryLabel1"><span>Secondary Label</span>
    </label>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledInputSecondaryHelpLabel1"><span>Filled Secondary/Help Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="filledInputSecondaryHelpLabel1" name="FilledInputSecondaryHelpLabel1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="filledInputSecondaryHelpLabel1"><span>Secondary Label</span>
    </label>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledInputSecondaryHelpLabelDisabled1"><span>Filled Disabled Secondary/Help Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="filledInputSecondaryHelpLabelDisabled1" name="FilledInputSecondaryHelpLabelDisabled1" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="filledInputSecondaryHelpLabelDisabled1"><span>Secondary Label</span>
    </label>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container small-12 columns md-search-input">
    <label class="md-label md-input__label" for="defaultInputSearch1"><span>Default Search</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-search_20 md-search-input__icon" style="font-size: 20px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="defaultInputSearch1" name="defaultInputSearch1" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-search-input">
    <label class="md-label md-input__label" for="loadingInputSearch1"><span>Loading Search</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-spinner md-spinner--20 md-spinner--black"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="loadingInputSearch1" name="loadingInputSearch1" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-search-input">
    <label class="md-label md-input__label" for="searchclear1"><span>Search with Clear</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-search_20 md-search-input__icon" style="font-size: 20px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="searchclear1" name="searchclear1" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-search-input">
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-search_20 md-search-input__icon" style="font-size: 20px;"></i></span>
      <input class="md-input md-input--pill md-input--before" tabindex="0" type="text" id="searchpill1" name="searchpill1" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-search-input">
    <label class="md-label md-input__label" for="defaultInputSearchFilled1"><span>Search Filled</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-search_20 md-search-input__icon" style="font-size: 20px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="defaultInputSearchFilled1" name="defaultInputSearchFilled1" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-search-input">
    <label class="md-label md-input__label" for="filledLoadingInputSearch1"><span>Loading Filled Search</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-spinner md-spinner--20 md-spinner--black"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="filledLoadingInputSearch1" name="filledLoadingInputSearch1" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-search-input">
    <label class="md-label md-input__label" for="searchclearFilled1"><span>Search with Clear Filled</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-search_20 md-search-input__icon" style="font-size: 20px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="searchclearFilled1" name="searchclearFilled1" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-search-input">
    <label class="md-label md-input__label" for="searchpillFilled1"><span>Search Pill Filled</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-search_20 md-search-input__icon" style="font-size: 20px;"></i></span>
      <input class="md-input md-input--pill md-input--before" tabindex="0" type="text" id="searchpillFilled1" name="searchpillFilled1" value="">
    </div>
  </div>
</div>
<div class="md--dark row" style="background-color: black; padding: 1rem;">
  <div class="md-input-container small-12 columns md-success">
    <label class="md-label md-input__label" for="inputSuccess2"><span>Success</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputSuccess2" name="inputSuccess2" value="Success Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the success message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-error">
    <label class="md-label md-input__label" for="inputError2"><span>Error</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputError2" name="inputError2" value="Error Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the error message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-warning">
    <label class="md-label md-input__label" for="inputWarning2"><span>Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputWarning2" name="inputWarning2" value="Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-warning">
    <label class="md-label md-input__label" for="inputDoubleWarning2"><span>Double Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="inputDoubleWarning2" name="inputDoubleWarning2" value="Double Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="default2"><span>Default</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="default2" name="default2" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="defaultPill2"><span>Pill</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--pill" tabindex="0" type="text" id="defaultPill2" name="defaultPill2" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="Multiline2"><span>Multiline</span>
    </label>
    <div class="md-input__wrapper">
      <textarea class="md-input md-input--multiline" tabindex="0" type="text" id="Multiline2" name="Multiline2"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container small-6 columns md-input--nested-1">
      <label class="md-label md-input__label" for="nested2"><span>Nested 1</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="nested2" name="nested2" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container small-6 columns md-input--nested-2">
      <label class="md-label md-input__label" for="nested22"><span>Nested 2</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="nested22" name="nested22" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container small-6 columns md-input--nested-3">
      <label class="md-label md-input__label" for="nested32"><span>Nested 3</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="nested32" name="nested32" value="">
      </div>
    </div>
  </div>
  <div class="md-input-container small-12 columns md-read-only">
    <label class="md-label md-input__label" for="readOnly2"><span>Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-dirty" tabindex="0" type="text" id="readOnly2" name="readOnly2" readonly="" value="With Placeholder">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="disabled2"><span>Disabled</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="disabled2" name="disabled2" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="disabledWithValue2"><span>Disabled Value</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled md-dirty" tabindex="0" type="text" disabled="" id="disabledWithValue2" name="disabledWithValue2" value="With Value">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-read-only md-disabled">
    <label class="md-label md-input__label" for="disabledro2"><span>Disabled Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-disabled md-dirty" tabindex="0" type="text" disabled="" id="disabledro2" name="disabledro2" readonly="" value="Disabled ReadOnly Input">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="placeholder2"><span>Placeholder</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="placeholder2" name="placeholder2" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="clearInput2"><span>Clear</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after md-dirty" tabindex="0" type="text" id="clearInput2" name="clearInput2" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input"><span class="md-input__after"><button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="rightIcon2"><span>Right Icon</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after" tabindex="0" type="text" id="rightIcon2" name="rightIcon2" placeholder="Placeholder Text" value=""><span class="md-input__after"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="leftIcon2"><span>Left Icon</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="leftIcon2" name="leftIcon2" placeholder="Placeholder Text" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="leftIconDisabled2"><span>Left Icon Disabled</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before md-disabled" tabindex="0" type="text" disabled="" id="leftIconDisabled2" name="leftIconDisabled2" placeholder="Placeholder Text" value="">
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="clearLeftIcon2"><span>Clear and Left Icon</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before md-input--after md-dirty" tabindex="0" type="text" id="clearLeftIcon2" name="clearLeftIcon2" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input"><span class="md-input__after"><button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="help2"><span>Help Text</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="help2" name="help2" placeholder="With Placeholder" value="">
    </div>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="inputSecondaryLabel2"><span>Secondary Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="inputSecondaryLabel2" name="inputSecondaryLabel2" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputSecondaryLabel2"><span>Secondary Label</span>
    </label>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="inputDisabledSecondaryLabel2"><span>Disabled Secondary Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="inputDisabledSecondaryLabel2" name="inputDisabledSecondaryLabel2" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputDisabledSecondaryLabel2"><span>Secondary Label</span>
    </label>
  </div>
  <div class="md-input-container small-12 columns">
    <label class="md-label md-input__label" for="inputSecondaryHelpLabel2"><span>Secondary/Help Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="inputSecondaryHelpLabel2" name="inputSecondaryHelpLabel2" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputSecondaryHelpLabel2"><span>Secondary Label</span>
    </label>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container small-12 columns md-disabled">
    <label class="md-label md-input__label" for="inputSecondaryHelpLabelDisabled2"><span>Disabled Secondary/Help Label</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="inputSecondaryHelpLabelDisabled2" name="inputSecondaryHelpLabelDisabled2" value="">
    </div>
    <label class="md-label md-input__secondary-label" for="inputSecondaryHelpLabelDisabled2"><span>Secondary Label</span>
    </label>
    <div class="md-input__help-text">Help Text</div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-success">
    <label class="md-label md-input__label" for="filledInputSuccess2"><span>Filled Success</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputSuccess2" name="FilledInputSuccess2" value="Success Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the success message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-error">
    <label class="md-label md-input__label" for="filledInputError2"><span>Filled Error</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputError2" name="FilledInputError2" value="Error Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the error message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-warning">
    <label class="md-label md-input__label" for="filledInputWarning2"><span>Filled Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputWarning2" name="FilledInputWarning2" value="Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-warning">
    <label class="md-label md-input__label" for="filledInputDoubleWarning2"><span>Filled Double Warning</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-dirty" tabindex="0" type="text" id="filledInputDoubleWarning2" name="FilledInputDoubleWarning2" value="Double Warning Text">
    </div>
    <div class="md-input__messages">
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
      <div class="md-input__message" role="alert">This is where the warning message would be.</div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filleddefault2"><span>Filled Default</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="filleddefault2" name="Filleddefault2" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledDefaultPill2"><span>Filled Pill</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--pill" tabindex="0" type="text" id="filledDefaultPill2" name="FilledDefaultPill2" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledMultiline2"><span>Filled Multiline</span>
    </label>
    <div class="md-input__wrapper">
      <textarea class="md-input md-input--multiline" tabindex="0" type="text" id="filledMultiline2" name="FilledMultiline2"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container md-input--filled small-6 columns md-input--nested-1">
      <label class="md-label md-input__label" for="filledNested2"><span>Filled Nested 1</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="filledNested2" name="FilledNested2" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container md-input--filled small-6 columns md-input--nested-2">
      <label class="md-label md-input__label" for="filledNested22"><span>Filled Nested 2</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="filledNested22" name="FilledNested22" value="">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="md-input-container md-input--filled small-6 columns md-input--nested-3">
      <label class="md-label md-input__label" for="filledNested32"><span>Filled Nested 3</span>
      </label>
      <div class="md-input__wrapper">
        <input class="md-input" tabindex="0" type="text" id="filledNested32" name="FilledNested32" value="">
      </div>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-read-only">
    <label class="md-label md-input__label" for="filledReadOnly2"><span>Filled Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-dirty" tabindex="0" type="text" id="filledReadOnly2" name="FilledReadOnly2" readonly="" value="With Placeholder">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledDisabled2"><span>Filled Disabled</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled" tabindex="0" type="text" disabled="" id="filledDisabled2" name="FilledDisabled2" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-disabled">
    <label class="md-label md-input__label" for="filledDisabledWithValue2"><span>Filled Disabled Value</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-disabled md-dirty" tabindex="0" type="text" disabled="" id="filledDisabledWithValue2" name="FilledDisabledWithValue2" value="With Value">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns md-read-only md-disabled">
    <label class="md-label md-input__label" for="filledDisabledro2"><span>Filled Disabled Read Only</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-read-only md-disabled md-dirty" tabindex="0" type="text" disabled="" id="filledDisabledro2" name="FilledDisabledro2" readonly="" value="Disabled ReadOnly Input">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledPlaceholder2"><span>Filled Placeholder</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input" tabindex="0" type="text" id="filledPlaceholder2" name="FilledPlaceholder2" placeholder="With Placeholder" value="">
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledClearInput2"><span>Filled Clear</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after md-dirty" tabindex="0" type="text" id="filledClearInput2" name="FilledClearInput2" placeholder="Placeholder Text" value="Press or click the clear icon to clear this input"><span class="md-input__after"><button class="md-button md-button--36 md-button--icon md-input__icon-clear" alt="clear input" type="button" aria-label="clear input" tabindex="0"><span class="md-button__children" style="opacity: 1;"><i class="md-icon icon icon-clear-active_16" style="font-size: 16px;"></i></span>
      </button>
      </span>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledRightIcon2"><span>Filled Right Icon</span>
    </label>
    <div class="md-input__wrapper">
      <input class="md-input md-input--after" tabindex="0" type="text" id="filledRightIcon2" name="FilledRightIcon2" placeholder="Placeholder Text" value=""><span class="md-input__after"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
    </div>
  </div>
  <div class="md-input-container md-input--filled small-12 columns">
    <label class="md-label md-input__label" for="filledLeftIcon2"><span>Filled Left Icon</span>
    </label>
    <div class="md-input__wrapper"><span class="md-input__before"><i class="md-icon icon icon-accessibility_16" style="font-size: 16px;"></i></span>
      <input class="md-input md-input--before" tabindex="0" type="text" id="filledLeftIcon2" name="FilledLeftIcon2" placeholder="P