Search Input

The Search Input component provides a search-specific text field with a leading search icon and an optional clear button.

Basic Usage

import { Search } from "@paramanu/forms-react"

export default function App() {
  return <Search placeholder="Search..." />
}

<div class="pm-search pm-search--outline pm-search--md" role="search">
  <span class="pm-search__icon" aria-hidden="true">&#128269;</span>
  <input class="pm-input pm-input--outline pm-input--md" type="search" placeholder="Search..." />
</div>

Variants

import { Search } from "@paramanu/forms-react"

export default function App() {
  return (
    <>
      <Search variant="outline" placeholder="Outline" />
      <Search variant="filled" placeholder="Filled" />
    </>
  )
}

<div class="pm-search pm-search--filled pm-search--md" role="search">
  <span class="pm-search__icon" aria-hidden="true">&#128269;</span>
  <input class="pm-input pm-input--filled pm-input--md" type="search" placeholder="Filled search..." />
</div>

Accessibility

Feature	Detail
`role="search"`	Wrapper uses search landmark
`type="search"`	Input uses semantic search type
Clear button	Labeled with `aria-label="Clear search"`

Best Practices

Use role="search" on the wrapper for screen reader navigation.
Provide a clear button when the input has a value.

Props

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "unstyled"`	`"outline"`	Visual variant
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Input size
`invalid`	`boolean`	`false`	Invalid state
`disabled`	`boolean`	`false`	Disabled state
`fullWidth`	`boolean`	`false`	Full-width layout
`onClear`	`() => void`	-	Clear button callback

CSS Classes

Class	Description
`pm-search`	Wrapper base class
`pm-search__icon`	Search icon
`pm-search__clear`	Clear button