SearchBar

SearchBar that includes an input field with a search icon and clear button, allowing users to easily search for specific items or content.

import { SearchBar } from '@lobehub/ui';

NPM Source Edit

Data Entry

Default

The rest of the props of Input are exactly the same as the original input.

Loading preview

APIs

SearchBar properties

allowClearInputProps

boolean

classNameInputProps

string

classNames

{ input?: string; shortKey?: string; }

defaultValue

string

The default value of the input. Use when uncontrolled.

Defaults to "".

enableShortKey

boolean

loading

boolean

onClearInputProps

() => void

onInputChange

(value: string) => void

onPressEnterInputProps

(event: KeyboardEvent<HTMLInputElement>) => void

onSearch

(value: string) => void

onValueChangeInputProps

(value: string, eventDetails: Input.ChangeEventDetails) => void

Callback fired when the `value` changes. Use when controlled.

prefixInputProps

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Prefix node rendered before the input

refInputProps

null | (instance: HTMLInputElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLInputElement | null>

Reference to the input element

shadowInputProps

boolean

Apply lobe shadow style

shortKey

string

Defaults to "mod+k".

sizeInputProps

'small' | 'large' | 'middle'

Size of the input

Defaults to 'middle'.

spotlight

boolean

styleInputProps

CSSProperties

styles

{ input?: CSSProperties; shortKey?: CSSProperties; }

suffixInputProps

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Suffix node rendered after the input

value

string

The value of the input. Use when controlled.

variantInputProps

'filled' | 'outlined' | 'borderless'

Visual variant, defaults to `filled` in dark mode and `outlined` in light mode

Also accepts all native HTML and ARIA attributes.