> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/vehicle-search-modules/03_vehicle-search-small.md).

# Vehicle Search Small

### Overview <a href="#overview" id="overview"></a>

The `VehicleSearchSmall` component is a lightweight vehicle search form that provides a simplified interface with basic filtering options. It's designed for minimal space usage while still allowing users to search for vehicles by key criteria.

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the VehicleSearchSmall component in a standard HTML page:

```html
<div 
  data-carpose-component="vehicle-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIifQ=="
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                      | Type   | Default | Description                                                                                                         |
| ------------------------------ | ------ | ------- | ------------------------------------------------------------------------------------------------------------------- |
| `data-carpose-component`       | string | -       | Identifies the component type, must be set to "car-search-small"                                                    |
| `data-api-key`                 | string | -       | API key for authentication with the Carpose backend services. Required for data fetching.                           |
| `data-search-url-forward`      | string | null    | URL to forward to when search button is clicked. Required for redirecting to the full search results page.          |
| `data-default-form-state-hash` | string | null    | Default form state hash to use when initializing the form. If not provided, a new empty form state will be created. |

### Features <a href="#features" id="features"></a>

* Filtering by manufacturer, model, and condition
* Real-time vehicle count display
* Search button to redirect to full search results
* Responsive layout that adapts to different screen sizes

### Examples <a href="#examples" id="examples"></a>

#### Basic Example <a href="#basic-example" id="basic-example"></a>

```html
<!-- Basic implementation with required attributes -->
<div 
  data-carpose-component="vehicle-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/vehicles"
></div>
```

#### With Default Form State <a href="#with-default-form-state" id="with-default-form-state"></a>

```html
<!-- Implementation with default form state (pre-selected manufacturer) -->
<div 
  data-carpose-component="vehicle-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/vehicles"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIxIn0="
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Search Mode**:
   * When the search button is clicked, the component redirects to the URL specified in `data-search-url-forward` with the form state hash appended.
   * The full search page will load with the current filters applied.
2. **Form Initialization**:
   * The form is initialized with the default state from `data-default-form-state-hash` if provided.
   * If not provided, an empty form state is created.
3. **Real-time Count**:
   * As filters are changed, the vehicle count updates in real-time to show available matches.