🚧 This website is work in progress 👷
Components
Forms
Search

Search

Search

Editable Example

import { Search } from "@wfp/react";

() => {
  return (
    <Search
      name="search"
      onClear="() => console.log('The search was cleared')"
      placeholder="search here"
    />
  );
};
PropDefaultDescriptionValue

defaultValue

string |number
–

formItemClassName

string
–

Specify an optional className to be applied to the form-item node

inputWrapperClassName

string
–

Provide a custom className that is applied directly to the underlying <input> or <textarea> node

hideLabel

boolean
–

Specify whether you want the underlying label to be visually hidden

light

boolean
–

closeButtonLabelText

string
–

The text for the close Button

disabled

boolean
–

Specify if the control should be disabled, or not

id

string
–

Provide a unique identifier for the control

hideControls

boolean
–

kind

"main" |"small" |"light" |"large" |"banner"
–

Specify a style for the search input

onChange

(event?: ChangeEvent<HTMLInputElement>,value?: string) => void
–

The new value is available first arg 'searchValue' and evt object if needed is on second arg. i.e. const handleChange = (searchValue, evt) => { console.log("searchValue", searchValue); // a string console.log("evt", evt); // the whole event object }

onSearchIconClick

() => void
–

small

boolean
–

true to use the small version of Search

value

string
–

className

string
–

wrapperClassName

string
–

An optional class to apply additional styling to the wrapper

rounded

boolean
–

onClear

() => void
–

Provide a function that is called when the search input is cleared

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

labelText

ReactNode
–

Provide the text that will be read by a screen reader when visiting this control

invalid

any
–

Specify whether the control is currently invalid. Either a boolean in combination with invalidText or an object( eg. { message: "Message", …otherErrorProperties }) can be passed.

invalidText

any
–

Provide the text that is displayed when the control is in an invalid state

additional

ReactNode
–

Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label

placeholder

string
–

Specify the placeholder attribute for the input

name

string
–

Provide a name for the control

required

boolean
–

Specify if the control is required (sets aria-invalid as well)

readOnly

boolean
–

If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)

inline

boolean
–

Renders the input as inline element for horizontal forms

addonBefore

ReactNode
–

Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)

addonAfter

ReactNode
–

Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)

components

AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage
–

Supports replacement components

On this page

References