SearchBar

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

SearchBar

Documentation for the SearchBar component.

Installation

bash

deno run -A jsr:@lockness/ui add searchbar

Usage

tsx

import { SearchBar } from '@lockness/ui/components'

<SearchBar
    placeholder='Search...'
    name='search'
    showIcon
    showShortcut
    shortcut='⌘K'
/>

Props

Prop	Type	Default	Description
variant	`'default' \| 'ghost' \| 'outline' \| 'filled'`	`'default'`	Visual style variant
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Component size
placeholder	`string`	`'Search...'`	Placeholder text
name	`string`	-	Input name attribute
value	`string`	-	Input value
showIcon	`boolean`	`true`	Show search icon
iconPosition	`'left' \| 'right'`	`'left'`	Icon position
showClear	`boolean`	`false`	Show clear button when input has value
shortcut	`string`	-	Keyboard shortcut to display (e.g., '⌘K')
showShortcut	`boolean`	`false`	Show keyboard shortcut badge
loading	`boolean`	`false`	Loading state
disabled	`boolean`	`false`	Disable input
fullWidth	`boolean`	`false`	Full width mode
class	`string`	-	Additional CSS class names
containerClass	`string`	-	Container class names
id	`string`	-	Element id attribute
autocomplete	`string`	`'off'`	Autocomplete attribute
...props	`unknown`	-	Additional HTML attributes

Theming

The SearchBar component can be customized using CSS variables. This allows you to change the appearance of the search input, including its size, colors, and icon styles globally or override specific instances.

Available CSS Variables

Variable	Default	Description
`--searchbar-height`	`2.5rem`	Height of the search bar
`--searchbar-padding-x`	`0.75rem`	Horizontal padding inside the search bar
`--searchbar-padding-y`	`0.5rem`	Vertical padding inside the search bar
`--searchbar-font-size`	`0.875rem`	Font size of search text
`--searchbar-border-radius`	`var(--radius)`	Border radius of the search bar
`--searchbar-background`	`var(--background)`	Background color of the search bar
`--searchbar-border-color`	`var(--border)`	Border color of the search bar
`--searchbar-icon-color`	`var(--muted-foreground)`	Color of the search icon

Theming Examples

Global Customization

Customize all search bars by setting CSS variables in your theme:

css

/* app/view/assets/app.css */
@theme {
    --searchbar-height: 3rem;
    --searchbar-padding-x: 1rem;
    --searchbar-font-size: 1rem;
    --searchbar-border-radius: 0.5rem;
}

Local Overrides

Override CSS variables for specific search bar instances:

tsx

<div style='--searchbar-height: 3.5rem; --searchbar-background: hsl(220 20% 95%);'>
    <SearchBar
        placeholder='Search documentation...'
        name='search'
        showIcon
        showShortcut
        shortcut='⌘K'
    />
</div>

Component-Specific Theming

Create themed sections with different search bar styles:

tsx

<section class="large-searchbar">
    <style>
        .large-searchbar {
            --searchbar-height: 4rem;
            --searchbar-padding-x: 1.5rem;
            --searchbar-font-size: 1.125rem;
            --searchbar-border-radius: 2rem;
            --searchbar-icon-color: hsl(220 70% 50%);
        }
    </style>
    <SearchBar
        placeholder="Search..."
        name="search"
        showIcon
        size="lg"
    />
</section>

BASIC USAGE

tsx

<SearchBar placeholder="Search..." />

VARIANTS

Default

Ghost

Outline

Filled

tsx

<SearchBar variant="default" placeholder="Default variant" />
<SearchBar variant="ghost" placeholder="Ghost variant" />
<SearchBar variant="outline" placeholder="Outline variant" />
<SearchBar variant="filled" placeholder="Filled variant" />

SIZES

tsx

<SearchBar size="sm" placeholder="Small" />
<SearchBar size="md" placeholder="Medium (default)" />
<SearchBar size="lg" placeholder="Large" />
<SearchBar size="xl" placeholder="Extra Large" />

ICON POSITION

tsx

<SearchBar iconPosition="left" placeholder="Icon on the left" />
<SearchBar iconPosition="right" placeholder="Icon on the right" />
<SearchBar showIcon={false} placeholder="No icon" />

CLEAR BUTTON

Add a clear button to reset the search input.

tsx

<SearchBar showClear placeholder="Type and click X to clear..." />

KEYBOARD SHORTCUT

Display a keyboard shortcut badge inside the search bar.

⌘K

Ctrl+K

tsx

<SearchBar shortcut="⌘K" showShortcut placeholder="Quick search..." />
<SearchBar shortcut="Ctrl+K" showShortcut placeholder="Quick search (Windows)..." />

LOADING STATE

Show a spinner when searching.

tsx

<SearchBar loading placeholder="Searching..." />
<SearchBar loading iconPosition="right" placeholder="Searching..." />

FULL WIDTH

tsx

<SearchBar fullWidth placeholder="Full width search..." />

DISABLED

tsx

<SearchBar disabled placeholder="Disabled search..." />

SEARCH WITH FILTERS

Combine SearchBar with SearchBarFilter in a SearchBarGroup for filtering.

tsx

import {
    SearchBar,
    SearchBarGroup,
    SearchBarFilter,
} from '@lockness/ui/components'

<SearchBarGroup>
    <SearchBar
        placeholder="Search products..."
        variant="ghost"
        showIcon={false}
    />
    <SearchBarFilter name="category">
        <option value="all">All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
        <option value="books">Books</option>
    </SearchBarFilter>
</SearchBarGroup>

COMPLETE EXAMPLE

A search bar with all features combined.

⌘K

tsx

<SearchBar
    variant="filled"
    size="lg"
    shortcut="⌘K"
    showShortcut
    showClear
    fullWidth
    placeholder="Search anything..."
/>

Edit this page