> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Search Field – Design
> Search Fields are text inputs that allow users to search for specific content.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
{!showCodeProp ?
setShowCodeBlock(!showCodeBlock)} style={{
appearance: "none"
}}>
{showCodeBlock ? "Hide code" : "Show code"}
: null}
StackBlitz demo
;
}
};
export const CodePreviewPlaceholder = ({double, fullWidth}) => {
const single = ;
return double ?
{single}
{single}
: single;
};
```tsx lines theme={null}
import { SearchField, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
| Size | Height |
| ------ | ------ |
| Small | 32px |
| Medium | 40px |
| Large | 48px |
## Behavior
Search Field has distinct visual states and handles clearing and overflow.
### Visual States
```tsx lines theme={null}
import { SearchField, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Clearing
The clear button follows web standards:
* Shows when there is an input value
* Not focusable, only clickable
```tsx lines theme={null}
import { SearchField } from "@servicetitan/anvil2";
function App() {
return
### Overflow
```tsx lines theme={null}
import { SearchField } from "@servicetitan/anvil2";
function App() {
return (
Long text scrolls horizontally within the container. The visible portion follows the cursor.
## Usage Guidelines
Use Search Field for search or filter experiences.
### When to Use
Use Search Field for search or filter experiences.
* As part of a Table
* For a catalog of items
* As part of the complex Dialog selection pattern
#### When not to use
Avoid search for small datasets or content easily found on the page.
### Alternatives
#### Search Field vs Combobox
Use Combobox when users select from an overlayed list of options, typically in a form field. Use Search Field for traditional search experiences, filtering lists on the page, tables, large datasets, or results that need additional filtering.
### How to Use
Combine Search Field with other UI elements for a complete search experience. Customize it to fit your needs.
#### General search results guidance
* Keep the search term present after running search
* Show the number of results when possible
* Show filters when possible
* Leverage [Skeleton](/docs/web/components/skeleton/design) loaders when waiting for results to populate
* Include a "no results" empty state when possible
##### Show the number of results when possible
```tsx lines theme={null}
import { SearchField, Flex, Text, Listbox } from "@servicetitan/anvil2";
import { useState, type ChangeEvent } from "react";
type Item = { id: number; label: string };
function App() {
const items: Item[] = [
{ id: 1, label: "Apple" },
{ id: 2, label: "Banana" },
{ id: 3, label: "Cherry" },
{ id: 4, label: "Grape" },
{ id: 5, label: "Kiwi" },
{ id: 6, label: "Mango" },
{ id: 7, label: "Orange" },
{ id: 8, label: "Peach" },
{ id: 9, label: "Pineapple" },
{ id: 10, label: "Strawberry" },
];
const [selected, setSelected] = useState- (items[1]);
const [result, setResult] = useState
(items);
const handleChange = (e: ChangeEvent) => {
if (!e.target.value) {
setResult(items);
return;
}
const newResult = items.filter((item) =>
item.label.toLowerCase().includes(e.target.value.toLowerCase()),
);
setResult(newResult);
};
return (
Fruit
This is description text talking about the fruit.
{result.length} results
{
setSelected(
items.find(
(item) => item?.label === selection?.label,
) as (typeof items)[number],
);
}}
>
{({ items }) =>
items.map((item) => (
{item.label}
))
}
);
}
export default App;
```
#### Dropdown with results
* Consider creating sections to organize results.
* Consider adding filters to narrow down results.
* If there are additional results that are not shown, consider adding a link to a page with all available results.
* If the results become too complicated, consider using a [Dialog](/docs/web/components/dialog/design) over a [Popover](/docs/web/components/popover/design).
```tsx lines theme={null}
import {
SearchField,
Popover,
Flex,
ButtonToggle,
Text,
Link,
Avatar,
} from "@servicetitan/anvil2";
import { useState, type ChangeEvent } from "react";
type Item = { id: number; label: string; type: string };
function App() {
const websiteItems: Item[] = [
{ id: 1, label: "Anvil1 web documentation", type: "Website" },
{ id: 2, label: "Anvil2 web documentation", type: "Website" },
{ id: 3, label: "ServiceTitan", type: "Website" },
{ id: 4, label: "Confluence", type: "Website" },
{ id: 5, label: "Jira Board", type: "Website" },
];
const documentationItems: Item[] = [
{ id: 6, label: "Anvil Backlog", type: "Documentation" },
{ id: 7, label: "Anvil Design System Confluence", type: "Documentation" },
{ id: 8, label: "Anvil Design Work Process", type: "Documentation" },
{ id: 9, label: "Anvil Figma Library", type: "Documentation" },
];
const peopleItems: Item[] = [
{ id: 11, label: "Alice Johnson", type: "People" },
{ id: 12, label: "Bob Smith", type: "People" },
{ id: 13, label: "Charlie Brown", type: "People" },
{ id: 14, label: "David Wilson", type: "People" },
{ id: 15, label: "Eve Davis", type: "People" },
{ id: 16, label: "Fiona Taylor", type: "People" },
{ id: 17, label: "George Miller", type: "People" },
{ id: 18, label: "Hannah Clark", type: "People" },
];
const items = websiteItems.concat(documentationItems, peopleItems);
const [result, setResult] = useState(items);
const [isWebsiteChecked, setIsWebsiteChecked] = useState(false);
const [isDocumentationChecked, setIsDocumentationChecked] = useState(false);
const [isPeopleChecked, setIsPeopleChecked] = useState(false);
const getAllFilter = () => {
if (!isWebsiteChecked && !isDocumentationChecked && !isPeopleChecked)
return true;
return false;
};
const handleChange = (e: ChangeEvent) => {
if (!e.target.value) {
setResult(items);
return;
}
const newResult = items.filter((item) =>
item.label.toLowerCase().includes(e.target.value.toLowerCase()),
);
setResult(newResult);
};
const hasWebsiteId = websiteItems.filter((item) =>
result.some((resultItem) => resultItem.id === item.id),
);
const hasDocumentationId = documentationItems.filter((item) =>
result.some((resultItem) => resultItem.id === item.id),
);
const hasPeopleId = peopleItems.filter((item) =>
result.some((resultItem) => resultItem.id === item.id),
);
const showNoResults = () => {
if (result.length === 0) return true;
const filterState = [
isWebsiteChecked,
isDocumentationChecked,
isPeopleChecked,
].filter((value) => value === true).length;
const website = isWebsiteChecked && hasWebsiteId.length === 0;
const documentation =
isDocumentationChecked && hasDocumentationId.length === 0;
const people = isPeopleChecked && hasPeopleId.length === 0;
if (
filterState === 2 &&
((website && documentation) ||
(website && people) ||
(documentation && people))
)
return true;
if (filterState === 1 && (website || people || documentation)) return true;
return false;
};
return (
Trigger
setIsWebsiteChecked((prev) => !prev)}
>
Websites {hasWebsiteId.length}
setIsDocumentationChecked((prev) => !prev)}
>
Documentation {hasDocumentationId.length}
setIsPeopleChecked((prev) => !prev)}
>
People {hasPeopleId.length}
{(getAllFilter() || isWebsiteChecked) &&
hasWebsiteId.length > 0 && (
Websites
)}
{(getAllFilter() || isWebsiteChecked) &&
hasWebsiteId &&
websiteItems.map((item) => {
const idExistsInResult = result.some(
(resultItem) => resultItem.id === item.id,
);
return idExistsInResult &&
Documentation
)}
{(getAllFilter() || isDocumentationChecked) &&
hasDocumentationId &&
documentationItems.map((item) => {
const idExistsInResult = result.some(
(resultItem) => resultItem.id === item.id,
);
return idExistsInResult &&
People
)}
{(getAllFilter() || isPeopleChecked) &&
hasPeopleId &&
peopleItems.map((item) => {
const idExistsInResult = result.some(
(resultItem) => resultItem.id === item.id,
);
return idExistsInResult &&
{showNoResults() && No results found }
);
}
export default App;
```
## Content
Placeholder text and search results should clearly communicate the search context.
## Keyboard Interaction
Navigate the Search Field using standard keyboard controls.
### Accessibility
Search Field doesn't have a label, so place it near related content to make its purpose clear.
For more guidance on form field labels and context, see [input field context association best practices](/docs/accessibility/labels-and-ctas#input-field-context-association).
