# wip product search atom

Source: docs/source/exhibits/guides/getting-started/wip-product-search-atom.tsx

```tsx
import { atom } from "atom.io"
import * as React from "react"
import type { JSX } from "react/jsx-runtime"

const productSearchQueryAtom = atom<string>({
	key: `productSearchQuery`,
	default: ``,
})

export function ProductSearch(): JSX.Element {
	const [query, setQuery] = React.useState(``)
	const normalizedQuery = query.trim().toLowerCase()
	const searchLabel = normalizedQuery || `everything`

	return (
		<section>
			<label htmlFor="product-search">Search products</label>
			<input
				id="product-search"
				value={query}
				onChange={(event) => {
					setQuery(event.currentTarget.value)
				}}
			/>
			<p>Searching for: {searchLabel}</p>
		</section>
	)
}
```