SearchInput

Search with a leading icon, a clear circle when filled, and a shortcut hint where one was asked for.

View source
import { SearchInput } from "@logicplanes/kaeso-ui";

Props

  • align
    "start" | "end"

    Text alignment of the value; numbers align to the end with tabular digits.

  • description
    ReactNode

    One sentence of help under the label.

  • invalid
    boolean

    Shows it as invalid; pair it with a message that says what to fix.

  • label
    ReactNode

    The visible label.

  • layout
    "horizontal" | "vertical"

    The label above the control (vertical) or beside it (horizontal).

  • onClear
    (() => void)

    Called when the clear button is pressed.

  • optional
    boolean

    Adds “Optional” to the label, for forms where most fields are required.

  • placeholder
    string

    Defaults to "Search" in the provider's language.

  • shortcut
    string[]

    A shortcut hint shown while empty: ["mod", "k"] or ["/"].

  • size
    "md" | "sm" | "lg" | "xl" = sm

    The height of the input.

  • trailing
    ReactNode

    Any trailing element (a button, a Kbd).