upp-search

A search bar component with a built-in clear button. It implements ControlValueAccessor so it can be used in both template-driven and reactive forms, or standalone with the Changed output.

When to Use

Use upp-search when you need a search/filter field. It provides a consistent search UI with automatic clear functionality and integrates with the platform's kiosk mode. For simple text entry without search semantics, prefer upp-input instead.

Demo

Source Code

HTML

<h2>Product Search</h2>
<p class="demo-description">Filter a product catalog in real time using <code>upp-search</code>.</p>

<div class="demo-section">
    <upp-search
        placeholder="Search products..."
        [kiosk]="false"
        (Changed)="onSearchChanged($event)">
    </upp-search>

    <p class="result-count">{{ filteredProducts.length }} of {{ products.length }} products</p>

    <ion-list class="product-list">
        <ion-item *ngFor="let product of filteredProducts" lines="full">
            <ion-label>
                <h3>{{ product.name }}</h3>
                <p>{{ product.category }}</p>
            </ion-label>
        </ion-item>
        <ion-item *ngIf="filteredProducts.length === 0" lines="none">
            <ion-label color="medium">No products match your search.</ion-label>
        </ion-item>
    </ion-list>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

interface Product {
    name: string;
    category: string;
}

@Component({
    selector: 'demo-upp-search',
    templateUrl: './demo-upp-search.html',
    styleUrls: ['../demo-common.scss', './demo-upp-search.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppSearchComponent {
    searchTerm = '';

    products: Product[] = [
        { name: 'Espresso', category: 'Coffee' },
        { name: 'Cappuccino', category: 'Coffee' },
        { name: 'Croissant', category: 'Bakery' },
        { name: 'Orange Juice', category: 'Drinks' },
        { name: 'Club Sandwich', category: 'Food' },
        { name: 'Cheesecake', category: 'Dessert' },
        { name: 'Green Tea', category: 'Tea' },
        { name: 'Caesar Salad', category: 'Food' },
    ];

    constructor(private change: ChangeDetectorRef) {
    }

    get filteredProducts(): Product[] {
        if (!this.searchTerm) {
            return this.products;
        }
        const term = this.searchTerm.toLowerCase();
        return this.products.filter(p =>
            p.name.toLowerCase().includes(term) || p.category.toLowerCase().includes(term)
        );
    }

    onSearchChanged(value: string | null) {
        this.searchTerm = value || '';
        this.change.markForCheck();
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

.result-count {
    margin: 12px 0 4px;
    font-size: 13px;
    color: var(--ion-color-medium, #888);
}

.product-list {
    padding: 0;

    ion-item h3 {
        font-size: 15px;
        font-weight: 500;
    }

    ion-item p {
        font-size: 13px;
        color: var(--ion-color-medium, #888);
    }
}

API Reference

UppSearchComponent (upp-search)

Inputs

Property	Type	Default	Description
placeholder	string	''	Placeholder text shown inside the search bar.
color	string	'default'	Color theme for the search bar.
disabled	boolean	false	Disables the search input.
kiosk	boolean	true	Enables kiosk mode (on-screen keyboard) when the platform reports kiosk.
value	string | null	null	The current search value (two-way via ControlValueAccessor).

Outputs

Event	Payload	Description
Changed	string | null	Emitted when the search value changes.