Search

Result

Search w/Icon

Search w/Button

Search w/Button & Text

Live Editor

function Example() {
    return (
        <div style={{ display: 'grid', gridGap: '1rem' }}>
            <Search label="Search w/Icon" />
            <Search label="Search w/Button" showSearch="button" />
            <Search label="Search w/Button & Text" showSearch="button-with-text" />
        </div>
    );
}

function Example() {
    return (
        <div style={{ display: 'grid', gridGap: '1rem' }}>
            <Search label="Search w/Icon" />
            <Search label="Search w/Button" showSearch="button" />
            <Search label="Search w/Button & Text" showSearch="button-with-text" />
        </div>
    );
}

With items

Result

Live Editor

function Example() {
    const items = [
        { value: 'One' },
        { value: 'Two' },
        { value: 'Three' },
        { value: 'Four' },
        { value: 'Five' },
    ];

    const [selectedKey, setSelectedKey] = useState(items[0].value);

    return (
        <Search defaultItems={items} selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
            {(item) => <Item key={item.value}>{item.value}</Item>}
        </Search>
    );
}

function Example() {
    const items = [
        { value: 'One' },
        { value: 'Two' },
        { value: 'Three' },
        { value: 'Four' },
        { value: 'Five' },
    ];

    const [selectedKey, setSelectedKey] = useState(items[0].value);

    return (
        <Search defaultItems={items} selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
            {(item) => <Item key={item.value}>{item.value}</Item>}
        </Search>
    );
}

With filters

Result

Live Editor

const filterOptions = [
    {
        name: 'First Name',
        value: 'firstName',
    },
    {
        name: 'Last Name',
        value: 'lastName',
    },
    {
        name: 'Email',
        value: 'email',
    },
    {
        name: 'Username',
        value: 'username',
    },
];

const items = [
    { value: 'One' },
    { value: 'Two' },
    { value: 'Three' },
    { value: 'Four' },
    { value: 'Five' },
];

function Example() {
    const [filter, setFilter] = useState(filterOptions[0].name);

    return (
        <Search
            filterOptions={filterOptions}
            filterTitle={filter}
            defaultItems={items}
            onChange={console.log}
            onFilterChange={(nextFilter) =>
                setFilter(filterOptions.find(({ value }) => value === nextFilter).name)
            }
            onSelectionChange={console.log}
        >
            {(item) => <Item key={item.value}>{item.value}</Item>}
        </Search>
    );
}

render(<Example />);

const filterOptions = [
    {
        name: 'First Name',
        value: 'firstName',
    },
    {
        name: 'Last Name',
        value: 'lastName',
    },
    {
        name: 'Email',
        value: 'email',
    },
    {
        name: 'Username',
        value: 'username',
    },
];

const items = [
    { value: 'One' },
    { value: 'Two' },
    { value: 'Three' },
    { value: 'Four' },
    { value: 'Five' },
];

function Example() {
    const [filter, setFilter] = useState(filterOptions[0].name);

    return (
        <Search
            filterOptions={filterOptions}
            filterTitle={filter}
            defaultItems={items}
            onChange={console.log}
            onFilterChange={(nextFilter) =>
                setFilter(filterOptions.find(({ value }) => value === nextFilter).name)
            }
            onSelectionChange={console.log}
        >
            {(item) => <Item key={item.value}>{item.value}</Item>}
        </Search>
    );
}

render(<Example />);

Analytics

The Search component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Search',
	actions: {
		onSearchButtonClick: { type: 'SEARCH_BUTTON_CLICK', payload: 'Click' },
		onChange: { type: 'SEARCH_CHANGE', payload: 'Change' },
		onFilterChange: { type: 'SEARCH_FILTER_CHANGE', payload: 'Change' },
		onSelectionChange: { type: 'SEARCH_SELECTION_CHANGE', payload: 'Change' },
	},
};

Props

Name	Type	Default Value	Required	Description
analytics	any		No
as	string		No	Render the input as the provided element; should be either input or textarea.
autoComplete	string		No
bsPrefix	string		No
defaultItems	Iterable<any>		No	The list of ComboBox items (uncontrolled).
defaultSelectedKey	Key		No	The initial selected key in the collection (uncontrolled).
defaultValue	string		No	The default value of the input element (uncontrolled).
description	ReactNode		No	A description for the field. Provides a hint such as specific requirements for what to choose.
disabled	boolean		No
disabledKeys	Iterable<Key>		No	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
errorText	string		No
filterOptions	IFilterOption[]		No
filterTitle	React.ReactNode		No
isInvalid	boolean		No	Whether the input value is invalid.
isSelectBox	boolean		No	Renders a menu down arrow, opens the menu on click, and provides a clear button if a value has been typed or a key has been selected. @ignore
isValid	boolean		No
isWarning	boolean		No	Render a warning around the input.
items	Iterable<any>		No	The list of ComboBox items (controlled).
key	Key		No
label	ReactNode		No	The content to display as the label.
labelProps	DOMAttributes<FocusableElement>		No
menuTrigger	MenuTriggerAction	`'input'`	No	The interaction required to display the ComboBox menu.
name	string		No	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
onChange	(value: string) => void		No
onClearClick	() => void		No	Callback fired when the clear button is clicked.
onFilterChange	(value: string) => void		No
onFocusChange	(isFocused: boolean) => void		No	Handler that is called when the element's focus status changes.
onOpenChange	(isOpen: boolean, menuTrigger?: MenuTriggerAction) => void		No	Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.
onSearchButtonClick	(value?: string) => void		No	Callback function that is fired when the search button is clicked.
onSelectionChange	(key: Key) => void		No	Handler that is called when the selection changes.
radius	"rounded" \| "square" \| "pill"		No
readOnly	boolean		No
ref	Ref<unknown>		No
renderEndAddOn	(() => Element) & (() => Element)		No	Render a custom add-on at the end of the input.
renderPrefix	(() => Element) & (() => Element)		No	Render a custom prefix at the beginning of the input.
renderStartAddOn	(() => Element) & (() => Element)		No	Render a custom add-on at the beginning of the input.
renderSuffix	(() => Element) & (() => Element)		No	Render a custom suffix at the end of the input.
required	boolean		No
selectedKey	Key		No	The currently selected key in the collection (controlled).
shouldFocusWrap	boolean		No	Whether keyboard navigation is circular.
showClearButton	boolean		No	Controls whether a clear button will be displayed when the input has a value.
showSearch	TSearchButton		No	Controls the display of the search icon, button, or button with text.
size	"sm" \| "lg"		No
type	string		No	The type of the Input.
validate	(value: ComboBoxValidationValue) => true \| ValidationError		No	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.
validationBehavior	"aria" \| "native"	`'aria'`	No	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.
validText	string		No	Shown when the field has been validated, isValid is true, and validText is provided.
value	string		No
variant	"primary" \| "outline-secondary"		No	Controls the variant of the buttons. Only applies when showSearch is set to 'button' or 'button-with-text'.
warningText	string		No	Shown when isWarning is true. This is not displayed as part of any validation state.

Name	Type	Required	Description
about	string	No
accessKey	string	No
aria-activedescendant	string	No	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic	Booleanish	No	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete	"list" \| "none" \| "inline" \| "both"	No	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.
aria-busy	Booleanish	No	Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked	boolean \| "true" \| "false" \| "mixed"	No	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
aria-colcount	number	No	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
aria-colindex	number	No	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
aria-colspan	number	No	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
aria-controls	string	No	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
aria-current	boolean \| "time" \| "step" \| "true" \| "false" \| "page" \| "location" \| "date"	No	Indicates the element that represents the current item within a container or set of related elements.
aria-describedby	string	No	Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-details	string	No	Identifies the element that provides a detailed, extended description for the object. Identifies the element (or elements) that provide a detailed, extended description for the object. @see aria-describedby.
aria-disabled	Booleanish	No	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
aria-dropeffect	"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"	No	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
aria-errormessage	string	No	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
aria-expanded	Booleanish	No	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto	string	No	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed	Booleanish	No	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
aria-haspopup	boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "listbox" \| "tree"	No	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden	Booleanish	No	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-invalid	boolean \| "true" \| "false" \| "grammar" \| "spelling"	No	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
aria-keyshortcuts	string	No	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label	string	No	Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby	string	No	Identifies the element (or elements) that labels the current element. @see aria-describedby.
aria-level	number	No	Defines the hierarchical level of an element within a structure.
aria-live	"off" \| "assertive" \| "polite"	No	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal	Booleanish	No	Indicates whether an element is modal when displayed.
aria-multiline	Booleanish	No	Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable	Booleanish	No	Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation	"horizontal" \| "vertical"	No	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns	string	No	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
aria-placeholder	string	No	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset	number	No	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
aria-pressed	boolean \| "true" \| "false" \| "mixed"	No	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
aria-readonly	Booleanish	No	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
aria-relevant	"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"	No	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
aria-required	Booleanish	No	Indicates that user input is required on the element before a form may be submitted.
aria-roledescription	string	No	Defines a human-readable, author-localized description for the role of an element.
aria-rowcount	number	No	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
aria-rowindex	number	No	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
aria-rowspan	number	No	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
aria-selected	Booleanish	No	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
aria-setsize	number	No	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
aria-sort	"none" \| "ascending" \| "descending" \| "other"	No	Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax	number	No	Defines the maximum allowed value for a range widget.
aria-valuemin	number	No	Defines the minimum allowed value for a range widget.
aria-valuenow	number	No	Defines the current value for a range widget. @see aria-valuetext.
aria-valuetext	string	No	Defines the human readable text alternative of aria-valuenow for a range widget.
autoCapitalize	string	No
autoCorrect	string	No
autoSave	string	No
className	string	No
color	string	No
contentEditable	Booleanish \| "inherit"	No
contextMenu	string	No
dangerouslySetInnerHTML	{ __html: string; }	No
datatype	string	No
defaultChecked	boolean	No
dir	string	No
draggable	Booleanish	No
hidden	boolean	No
id	string	No	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inlist	any	No
inputMode	"text" \| "none" \| "search" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"	No	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
is	string	No	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
itemID	string	No
itemProp	string	No
itemRef	string	No
itemScope	boolean	No
itemType	string	No
lang	string	No
onAbort	ReactEventHandler<FormControlElement>	No
onAbortCapture	ReactEventHandler<FormControlElement>	No
onAnimationEnd	AnimationEventHandler<FormControlElement>	No
onAnimationEndCapture	AnimationEventHandler<FormControlElement>	No
onAnimationIteration	AnimationEventHandler<FormControlElement>	No
onAnimationIterationCapture	AnimationEventHandler<FormControlElement>	No
onAnimationStart	AnimationEventHandler<FormControlElement>	No
onAnimationStartCapture	AnimationEventHandler<FormControlElement>	No
onAuxClick	MouseEventHandler<FormControlElement>	No
onAuxClickCapture	MouseEventHandler<FormControlElement>	No
onBeforeInput	FormEventHandler<FormControlElement>	No
onBeforeInputCapture	FormEventHandler<FormControlElement>	No
onBlur	FocusEventHandler<FormControlElement> & ((e: FocusEvent<HTMLInputElement, Element>) => void)	No	Handler that is called when the element loses focus.
onBlurCapture	FocusEventHandler<FormControlElement>	No
onCanPlay	ReactEventHandler<FormControlElement>	No
onCanPlayCapture	ReactEventHandler<FormControlElement>	No
onCanPlayThrough	ReactEventHandler<FormControlElement>	No
onCanPlayThroughCapture	ReactEventHandler<FormControlElement>	No
onChangeCapture	FormEventHandler<FormControlElement>	No
onClick	MouseEventHandler<FormControlElement>	No
onClickCapture	MouseEventHandler<FormControlElement>	No
onCompositionEnd	CompositionEventHandler<FormControlElement>	No
onCompositionEndCapture	CompositionEventHandler<FormControlElement>	No
onCompositionStart	CompositionEventHandler<FormControlElement>	No
onCompositionStartCapture	CompositionEventHandler<FormControlElement>	No
onCompositionUpdate	CompositionEventHandler<FormControlElement>	No
onCompositionUpdateCapture	CompositionEventHandler<FormControlElement>	No
onContextMenu	MouseEventHandler<FormControlElement>	No
onContextMenuCapture	MouseEventHandler<FormControlElement>	No
onCopy	ClipboardEventHandler<FormControlElement>	No
onCopyCapture	ClipboardEventHandler<FormControlElement>	No
onCut	ClipboardEventHandler<FormControlElement>	No
onCutCapture	ClipboardEventHandler<FormControlElement>	No
onDoubleClick	MouseEventHandler<FormControlElement>	No
onDoubleClickCapture	MouseEventHandler<FormControlElement>	No
onDrag	DragEventHandler<FormControlElement>	No
onDragCapture	DragEventHandler<FormControlElement>	No
onDragEnd	DragEventHandler<FormControlElement>	No
onDragEndCapture	DragEventHandler<FormControlElement>	No
onDragEnter	DragEventHandler<FormControlElement>	No
onDragEnterCapture	DragEventHandler<FormControlElement>	No
onDragExit	DragEventHandler<FormControlElement>	No
onDragExitCapture	DragEventHandler<FormControlElement>	No
onDragLeave	DragEventHandler<FormControlElement>	No
onDragLeaveCapture	DragEventHandler<FormControlElement>	No
onDragOver	DragEventHandler<FormControlElement>	No
onDragOverCapture	DragEventHandler<FormControlElement>	No
onDragStart	DragEventHandler<FormControlElement>	No
onDragStartCapture	DragEventHandler<FormControlElement>	No
onDrop	DragEventHandler<FormControlElement>	No
onDropCapture	DragEventHandler<FormControlElement>	No
onDurationChange	ReactEventHandler<FormControlElement>	No
onDurationChangeCapture	ReactEventHandler<FormControlElement>	No
onEmptied	ReactEventHandler<FormControlElement>	No
onEmptiedCapture	ReactEventHandler<FormControlElement>	No
onEncrypted	ReactEventHandler<FormControlElement>	No
onEncryptedCapture	ReactEventHandler<FormControlElement>	No
onEnded	ReactEventHandler<FormControlElement>	No
onEndedCapture	ReactEventHandler<FormControlElement>	No
onError	ReactEventHandler<FormControlElement>	No
onErrorCapture	ReactEventHandler<FormControlElement>	No
onFocus	FocusEventHandler<FormControlElement> & ((e: FocusEvent<HTMLInputElement, Element>) => void)	No	Handler that is called when the element receives focus.
onFocusCapture	FocusEventHandler<FormControlElement>	No
onGotPointerCapture	PointerEventHandler<FormControlElement>	No
onGotPointerCaptureCapture	PointerEventHandler<FormControlElement>	No
onInput	FormEventHandler<FormControlElement>	No
onInputCapture	FormEventHandler<FormControlElement>	No
onInvalid	FormEventHandler<FormControlElement>	No
onInvalidCapture	FormEventHandler<FormControlElement>	No
onKeyDown	KeyboardEventHandler<FormControlElement> & ((e: KeyboardEvent) => void)	No	Handler that is called when a key is pressed.
onKeyDownCapture	KeyboardEventHandler<FormControlElement>	No
onKeyPress	KeyboardEventHandler<FormControlElement>	No
onKeyPressCapture	KeyboardEventHandler<FormControlElement>	No
onKeyUp	KeyboardEventHandler<FormControlElement> & ((e: KeyboardEvent) => void)	No	Handler that is called when a key is released.
onKeyUpCapture	KeyboardEventHandler<FormControlElement>	No
onLoad	ReactEventHandler<FormControlElement>	No
onLoadCapture	ReactEventHandler<FormControlElement>	No
onLoadedData	ReactEventHandler<FormControlElement>	No
onLoadedDataCapture	ReactEventHandler<FormControlElement>	No
onLoadedMetadata	ReactEventHandler<FormControlElement>	No
onLoadedMetadataCapture	ReactEventHandler<FormControlElement>	No
onLoadStart	ReactEventHandler<FormControlElement>	No
onLoadStartCapture	ReactEventHandler<FormControlElement>	No
onLostPointerCapture	PointerEventHandler<FormControlElement>	No
onLostPointerCaptureCapture	PointerEventHandler<FormControlElement>	No
onMouseDown	MouseEventHandler<FormControlElement>	No
onMouseDownCapture	MouseEventHandler<FormControlElement>	No
onMouseEnter	MouseEventHandler<FormControlElement>	No
onMouseLeave	MouseEventHandler<FormControlElement>	No
onMouseMove	MouseEventHandler<FormControlElement>	No
onMouseMoveCapture	MouseEventHandler<FormControlElement>	No
onMouseOut	MouseEventHandler<FormControlElement>	No
onMouseOutCapture	MouseEventHandler<FormControlElement>	No
onMouseOver	MouseEventHandler<FormControlElement>	No
onMouseOverCapture	MouseEventHandler<FormControlElement>	No
onMouseUp	MouseEventHandler<FormControlElement>	No
onMouseUpCapture	MouseEventHandler<FormControlElement>	No
onPaste	ClipboardEventHandler<FormControlElement>	No
onPasteCapture	ClipboardEventHandler<FormControlElement>	No
onPause	ReactEventHandler<FormControlElement>	No
onPauseCapture	ReactEventHandler<FormControlElement>	No
onPlay	ReactEventHandler<FormControlElement>	No
onPlayCapture	ReactEventHandler<FormControlElement>	No
onPlaying	ReactEventHandler<FormControlElement>	No
onPlayingCapture	ReactEventHandler<FormControlElement>	No
onPointerCancel	PointerEventHandler<FormControlElement>	No
onPointerCancelCapture	PointerEventHandler<FormControlElement>	No
onPointerDown	PointerEventHandler<FormControlElement>	No
onPointerDownCapture	PointerEventHandler<FormControlElement>	No
onPointerEnter	PointerEventHandler<FormControlElement>	No
onPointerEnterCapture	PointerEventHandler<FormControlElement>	No
onPointerLeave	PointerEventHandler<FormControlElement>	No
onPointerLeaveCapture	PointerEventHandler<FormControlElement>	No
onPointerMove	PointerEventHandler<FormControlElement>	No
onPointerMoveCapture	PointerEventHandler<FormControlElement>	No
onPointerOut	PointerEventHandler<FormControlElement>	No
onPointerOutCapture	PointerEventHandler<FormControlElement>	No
onPointerOver	PointerEventHandler<FormControlElement>	No
onPointerOverCapture	PointerEventHandler<FormControlElement>	No
onPointerUp	PointerEventHandler<FormControlElement>	No
onPointerUpCapture	PointerEventHandler<FormControlElement>	No
onProgress	ReactEventHandler<FormControlElement>	No
onProgressCapture	ReactEventHandler<FormControlElement>	No
onRateChange	ReactEventHandler<FormControlElement>	No
onRateChangeCapture	ReactEventHandler<FormControlElement>	No
onReset	FormEventHandler<FormControlElement>	No
onResetCapture	FormEventHandler<FormControlElement>	No
onScroll	UIEventHandler<FormControlElement>	No
onScrollCapture	UIEventHandler<FormControlElement>	No
onSeeked	ReactEventHandler<FormControlElement>	No
onSeekedCapture	ReactEventHandler<FormControlElement>	No
onSeeking	ReactEventHandler<FormControlElement>	No
onSeekingCapture	ReactEventHandler<FormControlElement>	No
onSelect	ReactEventHandler<FormControlElement>	No
onSelectCapture	ReactEventHandler<FormControlElement>	No
onStalled	ReactEventHandler<FormControlElement>	No
onStalledCapture	ReactEventHandler<FormControlElement>	No
onSubmit	FormEventHandler<FormControlElement>	No
onSubmitCapture	FormEventHandler<FormControlElement>	No
onSuspend	ReactEventHandler<FormControlElement>	No
onSuspendCapture	ReactEventHandler<FormControlElement>	No
onTimeUpdate	ReactEventHandler<FormControlElement>	No
onTimeUpdateCapture	ReactEventHandler<FormControlElement>	No
onTouchCancel	TouchEventHandler<FormControlElement>	No
onTouchCancelCapture	TouchEventHandler<FormControlElement>	No
onTouchEnd	TouchEventHandler<FormControlElement>	No
onTouchEndCapture	TouchEventHandler<FormControlElement>	No
onTouchMove	TouchEventHandler<FormControlElement>	No
onTouchMoveCapture	TouchEventHandler<FormControlElement>	No
onTouchStart	TouchEventHandler<FormControlElement>	No
onTouchStartCapture	TouchEventHandler<FormControlElement>	No
onTransitionEnd	TransitionEventHandler<FormControlElement>	No
onTransitionEndCapture	TransitionEventHandler<FormControlElement>	No
onVolumeChange	ReactEventHandler<FormControlElement>	No
onVolumeChangeCapture	ReactEventHandler<FormControlElement>	No
onWaiting	ReactEventHandler<FormControlElement>	No
onWaitingCapture	ReactEventHandler<FormControlElement>	No
onWheel	WheelEventHandler<FormControlElement>	No
onWheelCapture	WheelEventHandler<FormControlElement>	No
placeholder	string	No	Temporary text that occupies the text input when it is empty.
prefix	string	No
property	string	No
radioGroup	string	No
resource	string	No
results	number	No
role	AriaRole	No
security	string	No
slot	string	No
spellCheck	Booleanish	No
style	CSSProperties	No
suppressContentEditableWarning	boolean	No
suppressHydrationWarning	boolean	No
tabIndex	number	No
title	string	No
translate	"yes" \| "no"	No
typeof	string	No
unselectable	"on" \| "off"	No
vocab	string	No

With items​

With filters​

Analytics​

Props​

With items

With filters

Analytics

Props