SearchFieldProps

Extends

• Omit<AriaSearchFieldProps, "className" | "pattern" | "type">.RefAttributes<HTMLDivElement>

Extended by

• KanbanSearchProps

Properties

aria-activedescendant?

optional aria-activedescendant: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Inherited from

Omit.aria-activedescendant

---

aria-autocomplete?

optional aria-autocomplete: "list" | "none" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Inherited from

Omit.aria-autocomplete

---

aria-controls?

optional aria-controls: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Inherited from

Omit.aria-controls

---

aria-describedby?

optional aria-describedby: string

Identifies the element (or elements) that describes the object.

Inherited from

Omit.aria-describedby

---

aria-details?

optional aria-details: string

Identifies the element (or elements) that provide a detailed, extended description for the object.

Inherited from

Omit.aria-details

---

aria-errormessage?

optional aria-errormessage: string

Identifies the element that provides an error message for the object.

Inherited from

Omit.aria-errormessage

---

aria-haspopup?

optional aria-haspopup: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Inherited from

Omit.aria-haspopup

---

aria-label?

optional aria-label: string

Defines a string value that labels the current element.

Inherited from

Omit.aria-label

---

aria-labelledby?

optional aria-labelledby: string

Identifies the element (or elements) that labels the current element.

Inherited from

Omit.aria-labelledby

---

autoComplete?

optional autoComplete: string

Describes the type of autocomplete functionality the input should provide if any. See MDN.

Inherited from

Omit.autoComplete

---

autoCorrect?

optional autoCorrect: string

An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See MDN.

Inherited from

Omit.autoCorrect

---

autoFocus?

optional autoFocus: boolean

Whether the element should receive focus on render.

Inherited from

Omit.autoFocus

---

children?

optional children: ChildrenOrFunction<SearchFieldRenderProps>

The children of the component. A function may be provided to alter the children based on component state.

Inherited from

Omit.children

---

classNames?

optional classNames: object

clear?

optional clear: ClassNameOrFunction<ButtonRenderProps>

field?

optional field: ClassNameOrFunction<SearchFieldRenderProps>

input?

optional input: ClassNameOrFunction<InputRenderProps>

loading?

optional loading: string

search?

optional search: string

---

defaultValue?

optional defaultValue: string

The default value (uncontrolled).

Inherited from

Omit.defaultValue

---

dir?

optional dir: string

Inherited from

Omit.dir

---

enterKeyHint?

optional enterKeyHint: "search" | "enter" | "done" | "go" | "next" | "previous" | "send"

An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.

Inherited from

Omit.enterKeyHint

---

excludeFromTabOrder?

optional excludeFromTabOrder: boolean

Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.

Inherited from

Omit.excludeFromTabOrder

---

form?

optional form: string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See MDN.

Inherited from

Omit.form

---

hidden?

optional hidden: boolean

Inherited from

Omit.hidden

---

id?

optional id: string

The element's unique identifier. See MDN.

Inherited from

Omit.id

---

inert?

optional inert: boolean

Inherited from

Omit.inert

---

inputMode?

optional inputMode: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.

Inherited from

Omit.inputMode

---

inputProps?

optional inputProps: Omit<InputProps, "type">

---

isDisabled?

optional isDisabled: boolean

Whether the input is disabled.

Inherited from

Omit.isDisabled

---

isInvalid?

optional isInvalid: boolean

Whether the input value is invalid.

Inherited from

Omit.isInvalid

---

isLoading?

optional isLoading: boolean

Displays a loading spinner.

---

isReadOnly?

optional isReadOnly: boolean

Whether the input can be selected but not changed by the user.

Inherited from

Omit.isReadOnly

---

isRequired?

optional isRequired: boolean

Whether user input is required on the input before form submission.

Inherited from

Omit.isRequired

---

key?

optional key: Key | null

Inherited from

RefAttributes.key

---

lang?

optional lang: string

Inherited from

Omit.lang

---

maxLength?

optional maxLength: number

The maximum number of characters supported by the input. See MDN.

Inherited from

Omit.maxLength

---

minLength?

optional minLength: number

The minimum number of characters required by the input. See MDN.

Inherited from

Omit.minLength

---

name?

optional name: string

The name of the input element, used when submitting an HTML form. See MDN.

Inherited from

Omit.name

---

onAnimationEnd?

optional onAnimationEnd: AnimationEventHandler<HTMLDivElement>

Inherited from

Omit.onAnimationEnd

---

onAnimationEndCapture?

optional onAnimationEndCapture: AnimationEventHandler<HTMLDivElement>

Inherited from

Omit.onAnimationEndCapture

---

onAnimationIteration?

optional onAnimationIteration: AnimationEventHandler<HTMLDivElement>

Inherited from

Omit.onAnimationIteration

---

onAnimationIterationCapture?

optional onAnimationIterationCapture: AnimationEventHandler<HTMLDivElement>

Inherited from

Omit.onAnimationIterationCapture

---

onAnimationStart?

optional onAnimationStart: AnimationEventHandler<HTMLDivElement>

Inherited from

Omit.onAnimationStart

---

onAnimationStartCapture?

optional onAnimationStartCapture: AnimationEventHandler<HTMLDivElement>

Inherited from

Omit.onAnimationStartCapture

---

onAuxClick?

optional onAuxClick: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onAuxClick

---

onAuxClickCapture?

optional onAuxClickCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onAuxClickCapture

---

onBeforeInput?

optional onBeforeInput: FormEventHandler<HTMLInputElement>

Handler that is called when the input value is about to be modified. See MDN.

Inherited from

Omit.onBeforeInput

---

onBlur()?

optional onBlur: (e) => void

Handler that is called when the element loses focus.

Parameters

e

FocusEvent<HTMLInputElement>

Returns

void

Inherited from

Omit.onBlur

---

onChange()?

optional onChange: (value) => void

Handler that is called when the value changes.

Parameters

value

string

Returns

void

Inherited from

Omit.onChange

---

onClear()?

optional onClear: () => void

Handler that is called when the clear button is pressed.

Returns

void

Inherited from

Omit.onClear

---

onClick?

optional onClick: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onClick

---

onClickCapture?

optional onClickCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onClickCapture

---

onCompositionEnd?

optional onCompositionEnd: CompositionEventHandler<HTMLInputElement>

Handler that is called when a text composition system completes or cancels the current text composition session. See MDN.

Inherited from

Omit.onCompositionEnd

---

onCompositionStart?

optional onCompositionStart: CompositionEventHandler<HTMLInputElement>

Handler that is called when a text composition system starts a new text composition session. See MDN.

Inherited from

Omit.onCompositionStart

---

onCompositionUpdate?

optional onCompositionUpdate: CompositionEventHandler<HTMLInputElement>

Handler that is called when a new character is received in the current text composition session. See MDN.

Inherited from

Omit.onCompositionUpdate

---

onContextMenu?

optional onContextMenu: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onContextMenu

---

onContextMenuCapture?

optional onContextMenuCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onContextMenuCapture

---

onCopy?

optional onCopy: ClipboardEventHandler<HTMLInputElement>

Handler that is called when the user copies text. See MDN.

Inherited from

Omit.onCopy

---

onCut?

optional onCut: ClipboardEventHandler<HTMLInputElement>

Handler that is called when the user cuts text. See MDN.

Inherited from

Omit.onCut

---

onDoubleClick?

optional onDoubleClick: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onDoubleClick

---

onDoubleClickCapture?

optional onDoubleClickCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onDoubleClickCapture

---

onFocus()?

optional onFocus: (e) => void

Handler that is called when the element receives focus.

Parameters

e

FocusEvent<HTMLInputElement>

Returns

void

Inherited from

Omit.onFocus

---

onFocusChange()?

optional onFocusChange: (isFocused) => void

Handler that is called when the element's focus status changes.

Parameters

isFocused

boolean

Returns

void

Inherited from

Omit.onFocusChange

---

onGotPointerCapture?

optional onGotPointerCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onGotPointerCapture

---

onGotPointerCaptureCapture?

optional onGotPointerCaptureCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onGotPointerCaptureCapture

---

onInput?

optional onInput: FormEventHandler<HTMLInputElement>

Handler that is called when the input value is modified. See MDN.

Inherited from

Omit.onInput

---

onKeyDown()?

optional onKeyDown: (e) => void

Handler that is called when a key is pressed.

Parameters

e

KeyboardEvent

Returns

void

Inherited from

Omit.onKeyDown

---

onKeyUp()?

optional onKeyUp: (e) => void

Handler that is called when a key is released.

Parameters

e

KeyboardEvent

Returns

void

Inherited from

Omit.onKeyUp

---

onLostPointerCapture?

optional onLostPointerCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onLostPointerCapture

---

onLostPointerCaptureCapture?

optional onLostPointerCaptureCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onLostPointerCaptureCapture

---

onMouseDown?

optional onMouseDown: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseDown

---

onMouseDownCapture?

optional onMouseDownCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseDownCapture

---

onMouseEnter?

optional onMouseEnter: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseEnter

---

onMouseLeave?

optional onMouseLeave: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseLeave

---

onMouseMove?

optional onMouseMove: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseMove

---

onMouseMoveCapture?

optional onMouseMoveCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseMoveCapture

---

onMouseOut?

optional onMouseOut: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseOut

---

onMouseOutCapture?

optional onMouseOutCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseOutCapture

---

onMouseOver?

optional onMouseOver: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseOver

---

onMouseOverCapture?

optional onMouseOverCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseOverCapture

---

onMouseUp?

optional onMouseUp: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseUp

---

onMouseUpCapture?

optional onMouseUpCapture: MouseEventHandler<HTMLDivElement>

Inherited from

Omit.onMouseUpCapture

---

onPaste?

optional onPaste: ClipboardEventHandler<HTMLInputElement>

Handler that is called when the user pastes text. See MDN.

Inherited from

Omit.onPaste

---

onPointerCancel?

optional onPointerCancel: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerCancel

---

onPointerCancelCapture?

optional onPointerCancelCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerCancelCapture

---

onPointerDown?

optional onPointerDown: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerDown

---

onPointerDownCapture?

optional onPointerDownCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerDownCapture

---

onPointerEnter?

optional onPointerEnter: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerEnter

---

onPointerLeave?

optional onPointerLeave: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerLeave

---

onPointerMove?

optional onPointerMove: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerMove

---

onPointerMoveCapture?

optional onPointerMoveCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerMoveCapture

---

onPointerOut?

optional onPointerOut: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerOut

---

onPointerOutCapture?

optional onPointerOutCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerOutCapture

---

onPointerOver?

optional onPointerOver: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerOver

---

onPointerOverCapture?

optional onPointerOverCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerOverCapture

---

onPointerUp?

optional onPointerUp: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerUp

---

onPointerUpCapture?

optional onPointerUpCapture: PointerEventHandler<HTMLDivElement>

Inherited from

Omit.onPointerUpCapture

---

onScroll?

optional onScroll: UIEventHandler<HTMLDivElement>

Inherited from

Omit.onScroll

---

onScrollCapture?

optional onScrollCapture: UIEventHandler<HTMLDivElement>

Inherited from

Omit.onScrollCapture

---

onSelect?

optional onSelect: ReactEventHandler<HTMLInputElement>

Handler that is called when text in the input is selected. See MDN.

Inherited from

Omit.onSelect

---

onSubmit()?

optional onSubmit: (value) => void

Handler that is called when the SearchField is submitted.

Parameters

value

string

Returns

void

Inherited from

Omit.onSubmit

---

onTouchCancel?

optional onTouchCancel: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchCancel

---

onTouchCancelCapture?

optional onTouchCancelCapture: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchCancelCapture

---

onTouchEnd?

optional onTouchEnd: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchEnd

---

onTouchEndCapture?

optional onTouchEndCapture: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchEndCapture

---

onTouchMove?

optional onTouchMove: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchMove

---

onTouchMoveCapture?

optional onTouchMoveCapture: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchMoveCapture

---

onTouchStart?

optional onTouchStart: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchStart

---

onTouchStartCapture?

optional onTouchStartCapture: TouchEventHandler<HTMLDivElement>

Inherited from

Omit.onTouchStartCapture

---

onTransitionCancel?

optional onTransitionCancel: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionCancel

---

onTransitionCancelCapture?

optional onTransitionCancelCapture: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionCancelCapture

---

onTransitionEnd?

optional onTransitionEnd: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionEnd

---

onTransitionEndCapture?

optional onTransitionEndCapture: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionEndCapture

---

onTransitionRun?

optional onTransitionRun: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionRun

---

onTransitionRunCapture?

optional onTransitionRunCapture: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionRunCapture

---

onTransitionStart?

optional onTransitionStart: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionStart

---

onTransitionStartCapture?

optional onTransitionStartCapture: TransitionEventHandler<HTMLDivElement>

Inherited from

Omit.onTransitionStartCapture

---

onWheel?

optional onWheel: WheelEventHandler<HTMLDivElement>

Inherited from

Omit.onWheel

---

onWheelCapture?

optional onWheelCapture: WheelEventHandler<HTMLDivElement>

Inherited from

Omit.onWheelCapture

---

ref?

optional ref: Ref<HTMLDivElement>

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

See

React Docs

Inherited from

RefAttributes.ref

---

slot?

optional slot: string | null

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

Inherited from

Omit.slot

---

spellCheck?

optional spellCheck: string

An enumerated attribute that defines whether the element may be checked for spelling errors. See MDN.

Inherited from

Omit.spellCheck

---

style?

optional style: StyleOrFunction<SearchFieldRenderProps>

The inline style for the element. A function may be provided to compute the style based on component state.

Inherited from

Omit.style

---

translate?

optional translate: "yes" | "no"

Inherited from

Omit.translate

---

validate()?

optional validate: (value) => true | ValidationError | null | undefined

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

Parameters

value

string

Returns

true | ValidationError | null | undefined

Inherited from

Omit.validate

---

validationBehavior?

optional validationBehavior: "native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

Default

'native'

Inherited from

Omit.validationBehavior

---

value?

optional value: string

The current value (controlled).

Inherited from

Omit.value

---

variant?

optional variant: "filled" | "outlined"