hightouch UI

Search Input

Variation of a text input specifically for entering search queries.

#

import { SearchInput } from "@hightouchio/ui";

function Example() {
const [value, setValue] = React.useState("");

return (
<SearchInput
value={value}
placeholder="Enter a value..."
onChange={(event) => setValue(event.target.value)}
/>
);
}

#

#

The size prop impacts font-size and height. Default is set to md.

import { SearchInput } from "@hightouchio/ui";

function Example() {
const [smallValue, setSmallValue] = React.useState("");
const [mediumValue, setMediumValue] = React.useState("");
const [largeValue, setLargeValue] = React.useState("");

return (
<Box display="flex" flexDirection="column" gap={3}>
<SearchInput
size="sm"
value={smallValue}
placeholder="Enter a value..."
onChange={(event) => setSmallValue(event.target.value)}
/>
<SearchInput
size="md"
value={mediumValue}
placeholder="Enter a value..."
onChange={(event) => setMediumValue(event.target.value)}
/>
<SearchInput
size="lg"
value={largeValue}
placeholder="Enter a value..."
onChange={(event) => setLargeValue(event.target.value)}
/>
</Box>
);
}

#

#

  • When entering a value in a text input immediately filters the content on page.
  • Inside a form, which takes the user to the next page where content is filtered according to the entered search query.

#

  • Use sentence case for placeholder text.
  • End placeholder text with three dots.

#

Inherits margin props.

NameDefaultDescription
autoFocusfalseboolean

Autofocus input on mount.

placeholder

—

string

Placeholder to show inside input when value is blank.

value

—

string

Input value.

width"xs""xs" | "sm" | "md" | "lg" | "auto" | "100%"

Input width.

size"md""sm" | "md" | "lg"

Input size.

On this page