# Search Field

## Essence

Search Field renders a labeled native search input for filtering local page content.

## Hook

Use when a component page or documentation surface needs an inline filter field.

## Internal Rules

- Render as a native `<input type="search">`.
- Keep the visible label; do not replace it with placeholder-only guidance.
- Width wraps to available space up to a readable control width.
- Use interactive spacing tokens for internal input padding.
- Use Interaction States for focus and focus-visible.
- Technical input attributes may be passed through `inputAttrs` when a page script needs a data hook.

## Use When

- Component Detail Body needs optional search.
- Icons needs a local icon filter.

## Do Not Use When

- The page needs global site search.
- The interaction is a command button or navigation link.

## Accessibility Notes

- The label must describe the search scope.
- Placeholder text may give an example, but cannot be the only label.

## Code Paths

- `packages/design-system/src/components/SearchField.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`