Input and Textarea

To add CLEAR BUTTON in a input add this code. Add class to the input “omh_material_input_clear” then create a span  <span class=”omh_material_clear”> then add what the desire icon inside
				
					<label class="omh_material_input omh_material_error">
    <input placeholder=" " type="text" required="required" autocomplete="off" class="omh_material_input_clear">
    <span class="label">Name</span>
    <div class="helper">This is a helper text</div>
    <span class="omh_material_clear">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48603 2 2 6.48604 2 12C2 17.514 6.48603 22 12 22C17.514 22 22 17.514 22 12C22 6.48604 17.514 2 12 2ZM12 3.5C16.7033 3.5 20.5 7.2967 20.5 12C20.5 16.7033 16.7033 20.5 12 20.5C7.29669 20.5 3.5 16.7033 3.5 12C3.5 7.2967 7.29669 3.5 12 3.5ZM15.2432 7.98926C15.0451 7.99394 14.8569 8.07679 14.7197 8.21973L12 10.9395L9.28027 8.21973C9.21036 8.14773 9.12672 8.0905 9.03429 8.05142C8.94187 8.01233 8.84254 7.99219 8.74219 7.99219C8.59293 7.99222 8.44707 8.03679 8.32328 8.12019C8.19949 8.20358 8.1034 8.32202 8.0473 8.46033C7.99119 8.59865 7.97763 8.75056 8.00835 8.89662C8.03907 9.04269 8.11267 9.17627 8.21973 9.28027L10.9395 12L8.21973 14.7197C8.14775 14.7888 8.09028 14.8716 8.0507 14.9632C8.01111 15.0548 7.9902 15.1534 7.98918 15.2532C7.98817 15.3529 8.00707 15.4519 8.04479 15.5443C8.08251 15.6367 8.13828 15.7206 8.20883 15.7912C8.27939 15.8617 8.36332 15.9175 8.4557 15.9552C8.54808 15.9929 8.64706 16.0118 8.74684 16.0108C8.84662 16.0098 8.9452 15.9889 9.03679 15.9493C9.12839 15.9097 9.21116 15.8523 9.28027 15.7803L12 13.0605L14.7197 15.7803C14.7888 15.8523 14.8716 15.9097 14.9632 15.9493C15.0548 15.9889 15.1534 16.0098 15.2532 16.0108C15.3529 16.0118 15.4519 15.9929 15.5443 15.9552C15.6367 15.9175 15.7206 15.8617 15.7912 15.7912C15.8617 15.7206 15.9175 15.6367 15.9552 15.5443C15.9929 15.4519 16.0118 15.3529 16.0108 15.2532C16.0098 15.1534 15.9889 15.0548 15.9493 14.9632C15.9097 14.8716 15.8523 14.7888 15.7803 14.7197L13.0605 12L15.7803 9.28027C15.8893 9.17559 15.9642 9.0404 15.9951 8.89242C16.026 8.74444 16.0115 8.59058 15.9534 8.451C15.8953 8.31143 15.7965 8.19266 15.6697 8.11026C15.543 8.02787 15.3943 7.98569 15.2432 7.98926Z" fill="#5F5F5F"/>
      </svg>        
    </span>
  </label>
				
			

To add error state add a class “omh_material_error” in the <label>

				
					<label class="omh_material_input omh_material_error">
				
			
				
					<label class="omh_material_input">
    <input placeholder=" " type="email" required="required" autocomplete="off">
    <span class="label">Email *</span>
    <div class="helper">This is a helper text</div>
    <div class="error">Error: Please enter a valid email</div>
  </label>
  <label class="omh_material_input">
    <input placeholder=" " type="password" required="required" pattern=".{8,}" autocomplete="off">
    <span class="label">Password *</span>
    <div class="helper">Must be at least 8 characters</div>
    <div class="error">Error:Passwords are 8 characters minimum</div>
  </label>
  <label class="omh_material_input omh_material_error">
    <input placeholder=" " type="text" required="required" autocomplete="off" class="omh_material_input_clear">
    <span class="omh_material_clear">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48603 2 2 6.48604 2 12C2 17.514 6.48603 22 12 22C17.514 22 22 17.514 22 12C22 6.48604 17.514 2 12 2ZM12 3.5C16.7033 3.5 20.5 7.2967 20.5 12C20.5 16.7033 16.7033 20.5 12 20.5C7.29669 20.5 3.5 16.7033 3.5 12C3.5 7.2967 7.29669 3.5 12 3.5ZM15.2432 7.98926C15.0451 7.99394 14.8569 8.07679 14.7197 8.21973L12 10.9395L9.28027 8.21973C9.21036 8.14773 9.12672 8.0905 9.03429 8.05142C8.94187 8.01233 8.84254 7.99219 8.74219 7.99219C8.59293 7.99222 8.44707 8.03679 8.32328 8.12019C8.19949 8.20358 8.1034 8.32202 8.0473 8.46033C7.99119 8.59865 7.97763 8.75056 8.00835 8.89662C8.03907 9.04269 8.11267 9.17627 8.21973 9.28027L10.9395 12L8.21973 14.7197C8.14775 14.7888 8.09028 14.8716 8.0507 14.9632C8.01111 15.0548 7.9902 15.1534 7.98918 15.2532C7.98817 15.3529 8.00707 15.4519 8.04479 15.5443C8.08251 15.6367 8.13828 15.7206 8.20883 15.7912C8.27939 15.8617 8.36332 15.9175 8.4557 15.9552C8.54808 15.9929 8.64706 16.0118 8.74684 16.0108C8.84662 16.0098 8.9452 15.9889 9.03679 15.9493C9.12839 15.9097 9.21116 15.8523 9.28027 15.7803L12 13.0605L14.7197 15.7803C14.7888 15.8523 14.8716 15.9097 14.9632 15.9493C15.0548 15.9889 15.1534 16.0098 15.2532 16.0108C15.3529 16.0118 15.4519 15.9929 15.5443 15.9552C15.6367 15.9175 15.7206 15.8617 15.7912 15.7912C15.8617 15.7206 15.9175 15.6367 15.9552 15.5443C15.9929 15.4519 16.0118 15.3529 16.0108 15.2532C16.0098 15.1534 15.9889 15.0548 15.9493 14.9632C15.9097 14.8716 15.8523 14.7888 15.7803 14.7197L13.0605 12L15.7803 9.28027C15.8893 9.17559 15.9642 9.0404 15.9951 8.89242C16.026 8.74444 16.0115 8.59058 15.9534 8.451C15.8953 8.31143 15.7965 8.19266 15.6697 8.11026C15.543 8.02787 15.3943 7.98569 15.2432 7.98926Z" fill="#5F5F5F"/>
      </svg>        
    </span>
    <span class="label">Name</span>
    <div class="helper">This is a helper text</div>
  </label>
  
  <label class="omh_material_input omh_material_joined">
    <div class="first_input">
      <input placeholder=" " type="text" required="required" autocomplete="off">
      <span class="label">Floor</span>
    </div>
    <div class="second_input">
      <input placeholder=" " type="text" required="required" autocomplete="off">
      <span class="label">Unit #</span>
    </div>
  </label>

  <label class="omh_material_input">
    <textarea rows="3" placeholder=" " > </textarea>  
    <span class="label">Message</span>
    <div class="helper">This is a helper text</div>
  </label>
  
  <label class="omh_material_search">
  <div class="search_input">
    <input placeholder="Search" type="text" required="required" autocomplete="off">
    <span class="icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.25 3C6.25482 3 3 6.25482 3 10.25C3 14.2452 6.25482 17.5 10.25 17.5C11.9782 17.5 13.5669 16.8895 14.8145 15.875L19.7197 20.7803C19.7888 20.8523 19.8716 20.9097 19.9632 20.9493C20.0548 20.9889 20.1534 21.0098 20.2532 21.0108C20.3529 21.0118 20.4519 20.9929 20.5443 20.9552C20.6367 20.9175 20.7206 20.8617 20.7912 20.7912C20.8617 20.7206 20.9175 20.6367 20.9552 20.5443C20.9929 20.4519 21.0118 20.3529 21.0108 20.2532C21.0098 20.1534 20.9889 20.0548 20.9493 19.9632C20.9097 19.8716 20.8523 19.7888 20.7803 19.7197L15.875 14.8145C16.8895 13.5669 17.5 11.9782 17.5 10.25C17.5 6.25482 14.2452 3 10.25 3ZM10.25 4.5C13.4345 4.5 16 7.06548 16 10.25C16 11.8013 15.3881 13.2029 14.3955 14.2354C14.3343 14.2803 14.2803 14.3343 14.2354 14.3955C13.2029 15.3881 11.8013 16 10.25 16C7.06548 16 4.5 13.4345 4.5 10.25C4.5 7.06548 7.06548 4.5 10.25 4.5Z" fill="#5F5F5F"/>
      </svg>        
    </span>
  </div>
  <span class="label"></span>
  <div class="helper">This is a helper text (Optional only when needed)</div>
</label>
				
			

Toggle

				
					<div class="omh_material_toggle">
  <label>
    <input type="checkbox">
    <span class="omh_toggle_option"></span> 
    <span class="omh_toggle_label">Any</span>
  </label>
</div>
<div class="omh_material_toggle">
  <label>
    <input type="checkbox" checked>
    <span class="omh_toggle_option"></span> 
    <span class="omh_toggle_label">1 Bedroom</span>
  </label>
</div>
<div class="omh_material_toggle">
  <label>
    <input type="checkbox">
    <span class="omh_toggle_option"></span> 
    <span class="omh_toggle_label">2 Bedroom</span>
  </label>
</div>
<div class="omh_material_toggle">
  <label>
    <input type="checkbox">
    <span class="omh_toggle_option"></span> 
    <span class="omh_toggle_label">3 Bedroom</span>
  </label>
</div>
<div class="omh_material_toggle">
  <label>
    <input type="checkbox">
    <span class="omh_toggle_option"></span> 
    <span class="omh_toggle_label">4 Bedroom</span>
  </label>
</div>
<div class="omh_material_toggle">
  <label>
    <input type="checkbox" checked>
    <span class="omh_toggle_option"></span> 
    <span class="omh_toggle_label">5 Bedroom</span>
  </label>
</div>
				
			

Radio

				
					<div class="omh_material_radio">
  <label>
    <input name="omh" type="radio">
    <span class="omh_radio_option">
      <span class="check"></span>
    </span> 
    Male
  </label>
</div>
<div class="omh_material_radio">
  <label>
    <input name="omh" type="radio">
    <span class="omh_radio_option">
      <span class="check"></span>
    </span> 
    Female
  </label>
</div>
<div class="omh_material_radio">
  <label>
    <input name="omh" type="radio">
    <span class="omh_radio_option">
      <span class="check"></span>
    </span> 
    Others
  </label>
</div>
				
			

Checkboxes

				
					<div class="omh_material_checkbox">
  <label>
    <input type="checkbox">
    <span class="omh_checkbox_option">
      <span class="check"></span>
    </span> 
    Philippines Condo
  </label>
</div>
<div class="omh_material_checkbox">
  <label>
    <input type="checkbox" checked>
    <span class="omh_checkbox_option">
      <span class="check"></span>
    </span> 
    Philippines House And Lot
</div>
<div class="omh_material_checkbox">
  <label>
    <input type="checkbox">
    <span class="omh_checkbox_option">
      <span class="check"></span>
    </span> 
    Philippines Vacant Lot
  </label>
</div>
				
			

Dropdown List

				
					<select class='omh-material-dropdown-list' name="opts" id="omh-dropdown" placeholder="Dropdown">
      <option value='1'>First item</option>
      <option value='2'>Second item</option>
      <option value='3'>Third item</option>
      <option value='4'>Last item</option>
    </select>
				
			

Dropdown Native

				
					<div class="omh_material_dropdown_native">
    <select class="omh_material_dropdown_native_input" required>
      <option value="" disabled selected></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <span class="omh_material_dropdown_native_highlight"></span>
    <img src="http://campaign.ohmyhome.com/wp-content/uploads/2021/05/chevron-right.svg" class="omh_material_dropdown_icon">
    <label class="omh_material_dropdown_native_label">Select</label>
  </div>
				
			

Dropdown Contact Number

To add error state add a class “omh_material_error” in the <label>

				
					<label class="omh_material_dropdown_contact omh_material_error">
				
			
				
					<div class="omh_material_dropdown_contact">
    <div class="omh_material_dropdown">
      <div class="dropdown" id="text">
        <span>+63</span>
          <label>
            <input type="checkbox">
          <ul>
            <li val="+63">+63</li>
            <li val="+63"></li>+63 </li>
            <li val="+63">+63</li>
          </ul>
          </label>
        <div class="omh_material_icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.3555 9.71484L16.8555 8.21484L12.2852 12.7852L7.71484 8.21484L6.21484 9.71484L12.2852 15.7852L18.3555 9.71484Z" fill="#5B5B5B"/>
          </svg>        
        </div>
      </div>
    </div>
    <div class="omh_material_input">
      <input placeholder=" " type="number" required="required" autocomplete="off">
    </div>
  </div>
				
			

Dropdown

To add error state add a class “omh_material_error” in the <label>

				
					<label class="omh_material_dropdown omh_material_error">
				
			
				
					 <div class="omh_material_dropdown">
    <div class="dropdown" id="text">
    <label>Label</label>
    <span>&nbsp</span>
      <label>
        <input type="checkbox">
      <ul>
        <li val="1 Year">1 Year</li>
        <li val="2 Year">2 Year</li>
        <li val="2+ Years">2+ Years</li>
      </ul>
      </label>
    <div class="omh_material_icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.3555 9.71484L16.8555 8.21484L12.2852 12.7852L7.71484 8.21484L6.21484 9.71484L12.2852 15.7852L18.3555 9.71484Z" fill="#5B5B5B"/>
      </svg>        
    </div>
  </div>
  </div>
				
			

Button

Primary
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_primary">Primary</button>
    <a href="#" class="omh_button omh_button_primary">Primary</a>
  </div>
				
			
Text - Black
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_text_black">Text - Black</button>
    <a href="#" class="omh_button omh_button_text_black">Text - Black</a>
  </div>
				
			
Secondary
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_secondary">Secondary</button>
    <a href="#" class="omh_button omh_button_secondary">Secondary</a>
  </div>
				
			
Tertiary
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_tertiary">Tertiary</button>
    <a href="#" class="omh_button omh_button_tertiary">Tertiary</a>
  </div>
				
			
Text - Orange
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_text_orange">Text - Orange</button>
    <a href="#" class="omh_button omh_button_text_orange">Text - Orange</a>
  </div>
				
			
Trailing Icon - Text
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_trailing_icon_text">
      Trailing Icon - Text
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 5.92969L8.5 7.42969L13.0703 12L8.5 16.5703L10 18.0703L16.0703 12L10 5.92969Z" fill="#E86225"/>
        </svg>                  
      </span>
    </button>
    <a href="#" class="omh_button omh_button_trailing_icon_text">
      Trailing Icon - Text
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 5.92969L8.5 7.42969L13.0703 12L8.5 16.5703L10 18.0703L16.0703 12L10 5.92969Z" fill="#E86225"/>
        </svg>                  
      </span>
    </a>
  </div>
				
			
Trailing Icon - Outlined
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_trailing_icon_outlined ">
      Trailing Icon - Outlined
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 5.92969L8.5 7.42969L13.0703 12L8.5 16.5703L10 18.0703L16.0703 12L10 5.92969Z" fill="#E86225"/>
        </svg>                  
      </span>
    </button>
    <a href="#" class="omh_button omh_button_trailing_icon_outlined">
      Trailing Icon - Outlined
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 5.92969L8.5 7.42969L13.0703 12L8.5 16.5703L10 18.0703L16.0703 12L10 5.92969Z" fill="#E86225"/>
        </svg>                  
      </span>
    </a>
  </div>
				
			
Secondary - White
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_secondary_white">Secondary - White</button>
    <a href="#" class="omh_button omh_button_secondary_white">Secondary - White</a>
  </div>
				
			
Leading Icon - Secondary
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_leading_icon_secondary">
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4ZM11 8V11H8V13H11V16H13V13H16V11H13V8H11Z"/>
        </svg>            
      </span>
      Leading Icon - Secondary
    </button>
    <a href="#" class="omh_button omh_button_leading_icon_secondary">
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4ZM11 8V11H8V13H11V16H13V13H16V11H13V8H11Z"/>
        </svg>            
      </span>
      Leading Icon - Secondary
    </a>
  </div>
				
			
Leading Icon - Tertiary
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_leading_icon_tertiary">
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4ZM11 8V11H8V13H11V16H13V13H16V11H13V8H11Z"/>
        </svg>            
      </span>
      Leading Icon - Tertiary
    </button>
    <a href="#" class="omh_button omh_button_leading_icon_tertiary">
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4ZM11 8V11H8V13H11V16H13V13H16V11H13V8H11Z"/>
        </svg>            
      </span>
      Leading Icon - Tertiary
    </a>
  </div>
				
			
Leading Icon - Primary
				
					<div id="omh_material_button">
    <button class="omh_button omh_button_leading_icon_primary">
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4ZM11 8V11H8V13H11V16H13V13H16V11H13V8H11Z"/>
        </svg>            
      </span>
      Leading Icon - Primary
    </button>
    <a href="#" class="omh_button omh_button_leading_icon_primary">
      <span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4ZM11 8V11H8V13H11V16H13V13H16V11H13V8H11Z"/>
        </svg>            
      </span>
      Leading Icon - Primary
    </a>
  </div>