# Forms: Search

## Component #1

- Preview
- HTML

Search for answers

                    <!-- Search -->
                    <div class="bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
                      <div class="container py-4">
                        <div class="w-lg-75 mx-lg-auto">
                          <form>
                            <!-- Input Card -->
                            <div class="input-card">
                              <div class="input-card-form">
                                <div class="input-group input-group-merge">
                                  <label for="searchAnswersForm" class="form-label visually-hidden">Search for answers</label>
                                  <span class="input-group-prepend input-group-text">
                                    <i class="bi-search"></i>
                                  </span>
                                  <input type="text" class="form-control" id="searchAnswersForm" placeholder="Search for answers" aria-label="Search for answers">
                                </div>
                              </div>
                              <button type="button" class="btn btn-primary btn-icon">
                                <i class="bi-arrow-right"></i>
                              </button>
                            </div>
                            <!-- End Input Card -->
                          </form>
                        </div>
                      </div>
                    </div>
                    <!-- End Search -->

## Component #2

- Preview
- HTML

#### 24 Results for "Developer tools"

Search for apps

                    <!-- Search -->
                    <div class="mb-4">
                      <div class="mb-3">
                        <h4>24 Results <span class="text-body small">for "Developer tools"</span></h4>
                      </div>

                      <form>
                        <!-- Input Card -->
                        <div class="input-card border">
                          <div class="input-card-form">
                            <label for="searchAppsForm" class="form-label visually-hidden">Search for apps</label>
                            <div class="input-group input-group-merge">
                              <span class="input-group-prepend input-group-text">
                                <i class="bi-search"></i>
                              </span>
                              <input type="text" class="form-control" id="searchAppsForm" placeholder="Search for apps" aria-label="Search for apps">
                            </div>
                          </div>
                          <button type="button" class="btn btn-primary">
                            <i class="bi-arrow-right"></i>
                          </button>
                        </div>
                        <!-- End Input Card -->
                      </form>
                    </div>
                    <!-- End Search -->

## Component #3

- Preview
- HTML

Job, title, skills, or company
City, state, or zip

###### Limit search to:

Job title
Skills
Companies
Field of study
Remote only

                    <!-- Hero -->
                    <div class="gradient-x-three-sm-primary">
                      <div class="container content-space-2">
                        <form>
                          <!-- Input Card -->
                          <div class="input-card input-card-sm mb-3">
                            <div class="input-card-form">
                              <label for="jobTitleForm" class="form-label visually-hidden">Job, title, skills, or company</label>
                              <div class="input-group input-group-merge">
                                <span class="input-group-prepend input-group-text">
                                  <i class="bi-search"></i>
                                </span>
                                <input type="text" class="form-control" id="jobTitleForm" placeholder="Job, title, skills, or company" aria-label="Job, title, skills, or company">
                              </div>
                            </div>

                            <div class="input-card-form">
                              <label for="cityForm" class="form-label visually-hidden">City, state, or zip</label>
                              <div class="input-group input-group-merge">
                                <span class="input-group-prepend input-group-text">
                                  <i class="bi-geo-alt"></i>
                                </span>
                                <input type="text" class="form-control" id="cityForm" placeholder="City, state, or zip" aria-label="City, state, or zip">
                              </div>
                            </div>
                            <button type="button" class="btn btn-primary">Search</button>
                          </div>
                          <!-- End Input Card -->
                        </form>

                        <div class="row align-items-center">
                          <div class="col-md-auto mb-3 mb-lg-0">
                            <h6 class="mb-1">Limit search to:</h6>
                          </div>
                          <!-- End Col -->

                          <div class="col-md mb-3 mb-lg-0">
                            <!-- Check -->
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox1" value="option1" checked>
                              <label class="form-check-label" for="jobSearchToCheckbox1">Job title</label>
                            </div>
                            <!-- End Check -->

                            <!-- Check -->
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox2" value="option2">
                              <label class="form-check-label" for="jobSearchToCheckbox2">Skills</label>
                            </div>
                            <!-- End Check -->

                            <!-- Check -->
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox3" value="option3">
                              <label class="form-check-label" for="jobSearchToCheckbox3">Companies</label>
                            </div>
                            <!-- End Check -->

                            <!-- Check -->
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="jobSearchToCheckbox4" value="option4">
                              <label class="form-check-label" for="jobSearchToCheckbox4">Field of study</label>
                            </div>
                            <!-- End Check -->
                          </div>

                          <div class="col-md-auto">
                            <!-- Switch -->
                            <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" id="remoteOnlySwitch">
                              <label class="form-check-label" for="remoteOnlySwitch">Remote only</label>
                            </div>
                            <!-- End Switch -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Hero -->