Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

Index

Properties

Methods

Properties

about?: string
accept?: string
accessKey?: string
afterResultsChildren?: ReactNode

Any optional children to display after the matched results in the autocomplete's menu. This should normally be for any presentational data or things that should not be searchable.

remarks

@since 2.1.0

alt?: string
anchor?: PositionAnchor

The configuration to anchor the fixed element to the container element.

defaultvalue

BELOW_CENTER_ANCHOR

aria-activedescendant?: string

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

aria-atomic?: Booleanish

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"

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

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"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

see

aria-pressed @see aria-selected.

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

see

aria-colindex.

aria-colindex?: number

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

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

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

see

aria-owns.

aria-current?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby?: string

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

see

aria-labelledby

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

see

aria-describedby.

aria-disabled?: Booleanish

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"

Indicates what functions can be performed when a dragged object is released on the drop target.

deprecated

in ARIA 1.1

aria-errormessage?: string

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

see

aria-invalid @see aria-describedby.

aria-expanded?: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-flowto?: string

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

Indicates an element's "grabbed" state in a drag-and-drop operation.

deprecated

in ARIA 1.1

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

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

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

see

aria-disabled.

aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

see

aria-errormessage.

aria-keyshortcuts?: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-label?: string

Defines a string value that labels the current element.

see

aria-labelledby.

aria-labelledby?: string

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

see

aria-describedby.

aria-level?: number

Defines the hierarchical level of an element within a structure.

aria-live?: "off" | "assertive" | "polite"

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

Indicates whether an element is modal when displayed.

aria-multiline?: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectable?: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation?: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

aria-owns?: string

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

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

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"

Indicates the current "pressed" state of toggle buttons.

see

aria-checked @see aria-selected.

aria-readonly?: Booleanish

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"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

see

aria-atomic.

aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

aria-roledescription?: string

Defines a human-readable, author-localized description for the role of an element.

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

see

aria-rowindex.

aria-rowindex?: number

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

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

Indicates the current "selected" state of various widgets.

see

aria-checked @see aria-pressed.

aria-setsize?: number

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"

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

aria-valuenow?: number

Defines the current value for a range widget.

see

aria-valuetext.

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

autoCapitalize?: string
autoComplete?: AutoCompletion
see

AutoCompletion

autoCorrect?: string
autoFocus?: boolean
autoSave?: string
beforeResultsChildren?: ReactNode

Any optional children to display before the matched results in the autocomplete's menu. This should normally be for any presentational data or things that should not be searchable.

remarks

@since 2.1.0

capture?: boolean | "user" | "environment"
checked?: boolean
children?: ReactNode
className?: string
clearOnAutoComplete?: boolean

Boolean if the text field's value should be cleared when the value is autocompleted. This is useful when also adding custom onAutoComplete behavior.

closeOnResize?: boolean

Boolean if the select's listbox should not hide if the user resizes the browser while it is visible.

closeOnScroll?: boolean

Boolean if the select's listbox should not hide if the user scrolls the page while it is visible.

color?: string
containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "className" | "style">

Any additional html attributes that should be applied to the main container div. This is probably only going to be used internally so that additional accessibility can be added to text fields for more complex widgets.

containerRef?: Ref<HTMLDivElement>

An optional ref to apply to the text field's container div element. The default ref is forwarded on to the input element.

contentEditable?: Booleanish | "inherit"
contextMenu?: string
crossOrigin?: string
dangerouslySetInnerHTML?: { __html: string }

Type declaration

  • __html: string
data: readonly AutoCompleteData[]

The list of data that should be autocompleted based on the provided filter.

datatype?: string
defaultChecked?: boolean
defaultValue?: string

The default value for the text field which will make it uncontrolled. If you manually change the defaultValue prop, the input's value will not change unless you provide a different key as well. Use the value prop instead for a controlled input.

dense?: boolean

Boolean if the form components should be using the dense spec to reduce the sizing slightly.

dir?: string
disableShowOnFocus?: boolean

Boolean if the list of suggestions should no longer appear immediately once the text field is focused and there is at least one item in the data list. If this is set to false, the menu will only be shown when:

  • a letter is added or removed from the text field
  • the user clicks it again
  • using the alt+arrow-down keyboard shortcut

If this prop is omitted, the show on focus behavior will be disabled on touch devices since touch device's soft keyboards do a lot of funky things with the viewport and scroll behavior. This makes it so the native viewport and scroll behavior actions are normally finished before the suggestions appear.

disableSwapping?: boolean

Boolean if the auto-swapping behavior should be disabled. It's normally recommended to not disable this since it'll allow elements to appear off screen.

defaultvalue

false

remarks

@since 5.0.0 This will always be true if the FixedPositionOptions.container is null. @remarks @since 5.1.6 Allow this to be false while the container is null. I can't figure out why I prevented that.

disableVHBounds?: boolean

Boolean if the fixed positioning should no longer prevent the fixed element to be positioned within the viewport. This is nice if you want to allow for full page scrolling instead and manually set a max-height on your element.

defaultvalue

false

disabled?: boolean
draggable?: Booleanish
enterKeyHint?: "search" | "enter" | "next" | "done" | "go" | "previous" | "send"
error?: boolean

Boolean if the text field should gain the error state and update the colors.

see

AutoCompleteFilterFunction

filterOnNoValue?: boolean

Boolean if the filter function should still be called when there is no value in the text field. This normally defaults to false so that the data is just returned, but it can be useful with a custom filter function that returns different data while there is no value.

filterOptions?: CaseInsensitiveOptions<AutoCompleteData>

An optional object of options to provide to the filter function. This will be defaulted to work with the fuzzy filter and case-insensitive filter functions to trim whitespace before doing the comparisons.

form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
height?: string | number
hidden?: boolean
highlight?: boolean

Boolean if the result list labels should be updated so that each matching letter is bolded. This only works when the data list is a list of strings, or the label is a string and when the letters appear in order. This will always be false if the filter prop is set to "fuzzy".

highlightClassName?: string

An optional className to apply to the <span> surrounding the matched text when the highlight prop is enabled.

highlightReapeating?: boolean

Boolean if the highlight functionality should no longer stop after the first match and instead highlight all matches of the search string within the label for an item.

highlightStyle?: CSSProperties

An optional style to apply to the <span> surrounding the matched text when the highlight prop is enabled.

id: string

The id to use for the AutoComplete and is required for a11y to fulfill the combobox role. This id will be passed directly to the <input> element and prefixed for all the other id-required elements.

initialX?: number

The initial x value to use when calculating the position instead of finding the container element to determine the the correct position. All the other positioning logic will still be in effect to ensure the element will be visible within the viewport.

initialY?: number

The initial y value to use when calculating the position instead of finding the container element to determine the the correct position. All the other positioning logic will still be in effect to ensure the element will be visible within the viewport.

inline?: boolean

Boolean if the component should be rendered inline with display: inline-flex instead of display: flex.

inlist?: any
inputClassName?: string

An optional className to apply to the input itself. The className prop will be applied to the container <div> instead.

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

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

inputStyle?: CSSProperties

An optional style to apply to the input itself. The style prop will be applied to the container <div> instead.

is?: string

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

isLeftAddon?: boolean

Boolean if the left children should be wrapped in the TextFieldAddon component. This is enabled by default since this is normally the behavior that is desired so that icons can be positioned correctly.

isRightAddon?: boolean

Boolean if the right children should be wrapped in the TextFieldAddon component. This is enabled by default since this is normally the behavior that is desired so that icons can be positioned correctly.

itemID?: string
itemProp?: string
itemRef?: string
itemScope?: boolean
itemType?: string
label?: ReactNode

An optional floating label to use for the text field. This should really only be used when the theme prop is not set to "none". This will be wrapped in the <Label> component itself and automatically apply the htmlFor prop for this text field.

labelClassName?: string

An optional className to apply to the label wrapper.

labelKey?: string

The key to use to extract a label from a result when the provided data list is a list of objects.

labelStyle?: CSSProperties

An optional style to apply to the label wrapper.

lang?: string
leftChildren?: ReactNode

An optional addon to apply to the left of the text field. This should normally be an icon. This element will not have pointer events so it can be "clicked through" to focus the text field instead.

list?: string
listboxClassName?: string

An optional className to also apply to the listbox element showing all the matches.

listboxStyle?: CSSProperties

An optional style to also apply to the listbox element showing all the matches.

listboxWidth?: PositionWidth

The sizing behavior for the listbox. It will default to have the same width as the select button, but it is also possible to either have the min-width be the width of the select button or just automatically determine the width.

The sizing behavior will always ensure that the left and right bounds of the listbox appear within the viewport.

max?: string | number
maxLength?: number
min?: string | number
minLength?: number
multiple?: boolean
name?: string
omitKeys?: readonly string[]

An optional list of keys that should be omitted from your data item before passing it to the suggestion Option. This is useful if you have additional metadata in your data objects that should not be passed as DOM attributes.

const item = { __id: 9432432, name: "Item", value: "guid" }

// don't want to pass `__id` to the Option
const omitKeys = ["__id"];
onAbort?: ReactEventHandler<HTMLInputElement>
onAbortCapture?: ReactEventHandler<HTMLInputElement>
onAnimationEnd?: AnimationEventHandler<HTMLInputElement>
onAnimationEndCapture?: AnimationEventHandler<HTMLInputElement>
onAnimationIteration?: AnimationEventHandler<HTMLInputElement>
onAnimationIterationCapture?: AnimationEventHandler<HTMLInputElement>
onAnimationStart?: AnimationEventHandler<HTMLInputElement>
onAnimationStartCapture?: AnimationEventHandler<HTMLInputElement>
onAutoComplete?: AutoCompleteHandler
see

AutoCompleteHandler

onAuxClick?: MouseEventHandler<HTMLInputElement>
onAuxClickCapture?: MouseEventHandler<HTMLInputElement>
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBeforeInputCapture?: FormEventHandler<HTMLInputElement>
onBlur?: FocusEventHandler<HTMLInputElement>
onBlurCapture?: FocusEventHandler<HTMLInputElement>
onCanPlay?: ReactEventHandler<HTMLInputElement>
onCanPlayCapture?: ReactEventHandler<HTMLInputElement>
onCanPlayThrough?: ReactEventHandler<HTMLInputElement>
onCanPlayThroughCapture?: ReactEventHandler<HTMLInputElement>
onChange?: ChangeEventHandler<HTMLInputElement>
onChangeCapture?: FormEventHandler<HTMLInputElement>
onClick?: MouseEventHandler<HTMLInputElement>
onClickCapture?: MouseEventHandler<HTMLInputElement>
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionEndCapture?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionStartCapture?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdateCapture?: CompositionEventHandler<HTMLInputElement>
onContextMenu?: MouseEventHandler<HTMLInputElement>
onContextMenuCapture?: MouseEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCopyCapture?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onCutCapture?: ClipboardEventHandler<HTMLInputElement>
onDoubleClick?: MouseEventHandler<HTMLInputElement>
onDoubleClickCapture?: MouseEventHandler<HTMLInputElement>
onDrag?: DragEventHandler<HTMLInputElement>
onDragCapture?: DragEventHandler<HTMLInputElement>
onDragEnd?: DragEventHandler<HTMLInputElement>
onDragEndCapture?: DragEventHandler<HTMLInputElement>
onDragEnter?: DragEventHandler<HTMLInputElement>
onDragEnterCapture?: DragEventHandler<HTMLInputElement>
onDragExit?: DragEventHandler<HTMLInputElement>
onDragExitCapture?: DragEventHandler<HTMLInputElement>
onDragLeave?: DragEventHandler<HTMLInputElement>
onDragLeaveCapture?: DragEventHandler<HTMLInputElement>
onDragOver?: DragEventHandler<HTMLInputElement>
onDragOverCapture?: DragEventHandler<HTMLInputElement>
onDragStart?: DragEventHandler<HTMLInputElement>
onDragStartCapture?: DragEventHandler<HTMLInputElement>
onDrop?: DragEventHandler<HTMLInputElement>
onDropCapture?: DragEventHandler<HTMLInputElement>
onDurationChange?: ReactEventHandler<HTMLInputElement>
onDurationChangeCapture?: ReactEventHandler<HTMLInputElement>
onEmptied?: ReactEventHandler<HTMLInputElement>
onEmptiedCapture?: ReactEventHandler<HTMLInputElement>
onEncrypted?: ReactEventHandler<HTMLInputElement>
onEncryptedCapture?: ReactEventHandler<HTMLInputElement>
onEnded?: ReactEventHandler<HTMLInputElement>
onEndedCapture?: ReactEventHandler<HTMLInputElement>
onError?: ReactEventHandler<HTMLInputElement>
onErrorCapture?: ReactEventHandler<HTMLInputElement>
onFocus?: FocusEventHandler<HTMLInputElement>
onFocusCapture?: FocusEventHandler<HTMLInputElement>
onGotPointerCapture?: PointerEventHandler<HTMLInputElement>
onGotPointerCaptureCapture?: PointerEventHandler<HTMLInputElement>
onInput?: FormEventHandler<HTMLInputElement>
onInputCapture?: FormEventHandler<HTMLInputElement>
onInvalid?: FormEventHandler<HTMLInputElement>
onInvalidCapture?: FormEventHandler<HTMLInputElement>
onKeyDown?: KeyboardEventHandler<HTMLInputElement>
onKeyDownCapture?: KeyboardEventHandler<HTMLInputElement>
onKeyPress?: KeyboardEventHandler<HTMLInputElement>
deprecated
onKeyPressCapture?: KeyboardEventHandler<HTMLInputElement>
deprecated
onKeyUp?: KeyboardEventHandler<HTMLInputElement>
onKeyUpCapture?: KeyboardEventHandler<HTMLInputElement>
onLoad?: ReactEventHandler<HTMLInputElement>
onLoadCapture?: ReactEventHandler<HTMLInputElement>
onLoadStart?: ReactEventHandler<HTMLInputElement>
onLoadStartCapture?: ReactEventHandler<HTMLInputElement>
onLoadedData?: ReactEventHandler<HTMLInputElement>
onLoadedDataCapture?: ReactEventHandler<HTMLInputElement>
onLoadedMetadata?: ReactEventHandler<HTMLInputElement>
onLoadedMetadataCapture?: ReactEventHandler<HTMLInputElement>
onLostPointerCapture?: PointerEventHandler<HTMLInputElement>
onLostPointerCaptureCapture?: PointerEventHandler<HTMLInputElement>
onMouseDown?: MouseEventHandler<HTMLInputElement>
onMouseDownCapture?: MouseEventHandler<HTMLInputElement>
onMouseEnter?: MouseEventHandler<HTMLInputElement>
onMouseLeave?: MouseEventHandler<HTMLInputElement>
onMouseMove?: MouseEventHandler<HTMLInputElement>
onMouseMoveCapture?: MouseEventHandler<HTMLInputElement>
onMouseOut?: MouseEventHandler<HTMLInputElement>
onMouseOutCapture?: MouseEventHandler<HTMLInputElement>
onMouseOver?: MouseEventHandler<HTMLInputElement>
onMouseOverCapture?: MouseEventHandler<HTMLInputElement>
onMouseUp?: MouseEventHandler<HTMLInputElement>
onMouseUpCapture?: MouseEventHandler<HTMLInputElement>
onPaste?: ClipboardEventHandler<HTMLInputElement>
onPasteCapture?: ClipboardEventHandler<HTMLInputElement>
onPause?: ReactEventHandler<HTMLInputElement>
onPauseCapture?: ReactEventHandler<HTMLInputElement>
onPlay?: ReactEventHandler<HTMLInputElement>
onPlayCapture?: ReactEventHandler<HTMLInputElement>
onPlaying?: ReactEventHandler<HTMLInputElement>
onPlayingCapture?: ReactEventHandler<HTMLInputElement>
onPointerCancel?: PointerEventHandler<HTMLInputElement>
onPointerCancelCapture?: PointerEventHandler<HTMLInputElement>
onPointerDown?: PointerEventHandler<HTMLInputElement>
onPointerDownCapture?: PointerEventHandler<HTMLInputElement>
onPointerEnter?: PointerEventHandler<HTMLInputElement>
onPointerEnterCapture?: PointerEventHandler<HTMLInputElement>
onPointerLeave?: PointerEventHandler<HTMLInputElement>
onPointerLeaveCapture?: PointerEventHandler<HTMLInputElement>
onPointerMove?: PointerEventHandler<HTMLInputElement>
onPointerMoveCapture?: PointerEventHandler<HTMLInputElement>
onPointerOut?: PointerEventHandler<HTMLInputElement>
onPointerOutCapture?: PointerEventHandler<HTMLInputElement>
onPointerOver?: PointerEventHandler<HTMLInputElement>
onPointerOverCapture?: PointerEventHandler<HTMLInputElement>
onPointerUp?: PointerEventHandler<HTMLInputElement>
onPointerUpCapture?: PointerEventHandler<HTMLInputElement>
onProgress?: ReactEventHandler<HTMLInputElement>
onProgressCapture?: ReactEventHandler<HTMLInputElement>
onRateChange?: ReactEventHandler<HTMLInputElement>
onRateChangeCapture?: ReactEventHandler<HTMLInputElement>
onReset?: FormEventHandler<HTMLInputElement>
onResetCapture?: FormEventHandler<HTMLInputElement>
onScroll?: UIEventHandler<HTMLInputElement>
onScrollCapture?: UIEventHandler<HTMLInputElement>
onSeeked?: ReactEventHandler<HTMLInputElement>
onSeekedCapture?: ReactEventHandler<HTMLInputElement>
onSeeking?: ReactEventHandler<HTMLInputElement>
onSeekingCapture?: ReactEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSelectCapture?: ReactEventHandler<HTMLInputElement>
onStalled?: ReactEventHandler<HTMLInputElement>
onStalledCapture?: ReactEventHandler<HTMLInputElement>
onSubmit?: FormEventHandler<HTMLInputElement>
onSubmitCapture?: FormEventHandler<HTMLInputElement>
onSuspend?: ReactEventHandler<HTMLInputElement>
onSuspendCapture?: ReactEventHandler<HTMLInputElement>
onTimeUpdate?: ReactEventHandler<HTMLInputElement>
onTimeUpdateCapture?: ReactEventHandler<HTMLInputElement>
onTouchCancel?: TouchEventHandler<HTMLInputElement>
onTouchCancelCapture?: TouchEventHandler<HTMLInputElement>
onTouchEnd?: TouchEventHandler<HTMLInputElement>
onTouchEndCapture?: TouchEventHandler<HTMLInputElement>
onTouchMove?: TouchEventHandler<HTMLInputElement>
onTouchMoveCapture?: TouchEventHandler<HTMLInputElement>
onTouchStart?: TouchEventHandler<HTMLInputElement>
onTouchStartCapture?: TouchEventHandler<HTMLInputElement>
onTransitionEnd?: TransitionEventHandler<HTMLInputElement>
onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement>
onVolumeChange?: ReactEventHandler<HTMLInputElement>
onVolumeChangeCapture?: ReactEventHandler<HTMLInputElement>
onWaiting?: ReactEventHandler<HTMLInputElement>
onWaitingCapture?: ReactEventHandler<HTMLInputElement>
onWheel?: WheelEventHandler<HTMLInputElement>
onWheelCapture?: WheelEventHandler<HTMLInputElement>
pattern?: string
placeholder?: string
portal?: boolean

Boolean if the portal should be used.

portalInto?: PortalInto
portalIntoId?: string
prefix?: string
preventOverlap?: boolean

Boolean if the fixed element should no longer be able to overlap the container element. This is useful for autocomplete menus or other components that retain focus on the container element while the fixed element becomes visible.

defaultvalue

false

property?: string
radioGroup?: string
readOnly?: boolean
required?: boolean
resource?: string
results?: number
rightChildren?: ReactNode

An optional addon to apply to the right of the text field. This should be a clickable button such as a password field toggle or a reset button for the field.

role?: AriaRole
security?: string
size?: number
slot?: string
spellCheck?: Booleanish
src?: string
step?: string | number
stretch?: boolean

Boolean if the component should gain flex: 1 1 auto; which is useful for full-width behavior within flex containers.

defaultvalue

false

remarks

@since 5.0.0

style?: CSSProperties
suppressContentEditableWarning?: boolean
suppressHydrationWarning?: boolean
tabIndex?: number
theme?: FormTheme

The current theme type.

title?: string
transformOrigin?: boolean

Boolean if the style object should include the transformOrigin value based on the x and y positions.

defaultvalue

false

translate?: "yes" | "no"
typeof?: string
underlineDirection?: FormUnderlineDirection

The current underline direction.

unselectable?: "on" | "off"
value?: string

The value to use for the text field. This will make the component controlled and require the onChange prop to be provided as well otherwise this will act as a read only text field.

valueKey?: string

The key to use to extract a searchable value string from a result when the provided data list is a list of objects.

vhMargin?: number

The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.

defaultvalue

16

vocab?: string
vwMargin?: number

The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.

defaultvalue

16

width?: string | number
xMargin?: number

The container width margin to apply so that the element doesn't need to be directly on the container's edge.

defaultvalue

0

yMargin?: number

The container height margin to apply so that the element doesn't need to be directly on the container's edge

defaultvalue

0

Methods

  • getResultId(id: string, index: number): string
  • A function to call that will generate an id for each result in the autocomplete's listbox. These ids are required for a11y as it'll be used with the aria-activedescendant movement within the autocomplete.

    Parameters

    • id: string
    • index: number

    Returns string

  • getResultLabel(data: Readonly<AutoCompleteData>, labelKey: string, query: string): ReactNode
  • A function to call that will get a renderable label or children to display for a result in the autocomplete's list of results. The default behavior will be to return the result itself if it is a string, otherwise try to return the children or labelKey attribute if it is an object.

    Parameters

    Returns ReactNode

  • A function to call that will extract a searchable value string from each result. This must return a string and will prevent the autocomplete from filtering data with the built in filter functions.

    Parameters

    Returns string

Generated using TypeDoc