SearchField

Search input with built-in magnifier icon and clear button. Inherits label/required/helperText/error from Input.

Examples

Search contact*

<SearchField
  label="Search contact"
  required
  value={q}
  onChange={setQ}
  placeholder="Type a name..."
/>

Find user

Search by name, email or phone.

<SearchField
  label="Find user"
  value={q}
  onChange={setQ}
  helperText="Search by name, email or phone."
/>

Props of the SearchField component.

Prop	Type	Default	Description
`value*`	`string`	—	—
`onChange*`	`(value: string) => void`	—	Receives the value directly (not the event).
`label`	`string`	—	—
`required`	`boolean`	`false`	—
`helperText`	`string`	—	—
`error`	`string \| boolean`	—	—
`placeholder`	`string`	`'Buscar...'`	—
`disabled`	`boolean`	`false`	—