Search Form Component

Icon version

Component Details

Search form allows users to input queries and submit them to retrieve relevant content or information.


       <div class="c-search-form">
         <form action="#" method="GET">
           <input type="text" placeholder="Search..." />
           <button type="submit" class="c-search-form__button">Search</button>
         </form>                        
       </div>
      
       <div class="c-search-form c-search-form--alt">        
         <form action="#" method="GET">
           <input type="text" placeholder="Search..." />
           <button type="submit" class="c-search-form__button">
             <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1A202C"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
           </button>
         </form>
       </div>


        .c-search-form form {
          display: flex;
          column-gap: 10px;
        }
        
        .c-search-form input[type="text"] {
          width: 400px;
          border-radius: 5px;
          border: none;
          padding: 12px;
          font-size: 16px;
        }
        
        .c-search-form .c-search-form__button {
          padding: 12px 18px;
          border-radius: 5px;
          border: none;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .c-search-form .c-search-form__button:hover {
          background-color: lightgray;
        }
        
        .c-search-form--alt {
          width: fit-content;
          position: relative;
        }
        
        .c-search-form--alt input[type="text"] {
          padding: 12px 35px 12px 12px;
        }
        
        .c-search-form--alt .c-search-form__button {
          background-color: transparent;
          padding: 2px;
          position: absolute;
          top: 8px;
          right: 8px;
        }
        
        .c-search-form--alt .c-search-form__button svg {
          transition: all 0.2s ease;
        }
        
        .c-search-form--alt .c-search-form__button:hover {
          background-color: transparent;
        }
        
        .c-search-form--alt .c-search-form__button:hover svg {
          fill: #ff3c26;
        }


        .c-search-form {  
          form {
            display: flex;
            column-gap: 10px;
          }
          
          input[type="text"] {
            width: 400px;
            border-radius: 5px;
            border: none;
            padding: 12px;
            font-size: 16px;
          }
          
          .c-search-form__button {
            padding: 12px 18px;
            border-radius: 5px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            
            &:hover {
              background-color: lightgray;
            }
          }    
          
          &--alt {
            width: fit-content;
            position: relative;
            
            input[type="text"] {
              padding: 12px 35px 12px 12px;
            }
            
            .c-search-form__button {
              background-color: transparent;
              padding: 2px;
              position: absolute;
              top: 8px;
              right: 8px;
              
              svg {
                transition: all 0.2s ease;
              }
              
              &:hover {
                background-color: transparent;
                
                svg {
                  fill: #ff3c26;          
                }
              }
            }
          }
        }