The configuration to anchor the fixed element to the container element.
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
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.
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.
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.
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
Defines the total number of columns in a table, grid, or treegrid.
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
Identifies the element (or elements) whose contents or presence are controlled by the current element.
Indicates the element that represents the current item within a container or set of related elements.
Identifies the element (or elements) that describes the object.
Identifies the element that provides a detailed, extended description for the object.
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
Indicates what functions can be performed when a dragged object is released on the drop target.
Identifies the element that provides an error message for the object.
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
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.
Indicates an element's "grabbed" state in a drag-and-drop operation.
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
Indicates whether the element is exposed to an accessibility API.
Indicates the entered value does not conform to the format expected by the application.
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Defines the hierarchical level of an element within a structure.
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.
Indicates whether an element is modal when displayed.
Indicates whether a text box accepts multiple lines of input or only a single line.
Indicates that the user may select more than one item from the current selectable descendants.
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
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.
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.
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.
Indicates the current "pressed" state of toggle buttons.
Indicates that the element is not editable, but is otherwise operable.
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
Indicates that user input is required on the element before a form may be submitted.
Defines a human-readable, author-localized description for the role of an element.
Defines the total number of rows in a table, grid, or treegrid.
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
Indicates the current "selected" state of various widgets.
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.
Indicates if items in a table or grid are sorted in ascending or descending order.
Defines the maximum allowed value for a range widget.
Defines the minimum allowed value for a range widget.
Defines the current value for a range widget.
Defines the human readable text alternative of aria-valuenow for a range widget.
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.
Boolean if the text field's value should be cleared when the value is
autocompleted. This is useful when also adding custom onAutoComplete
behavior.
Boolean if the select's listbox should not hide if the user resizes the browser while it is visible.
Boolean if the select's listbox should not hide if the user scrolls the page while it is visible.
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.
An optional ref to apply to the text field's container div element. The
default ref is forwarded on to the input element.
The list of data that should be autocompleted based on the provided filter.
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.
Boolean if the form components should be using the dense spec to reduce
the sizing slightly.
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:
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.
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.
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.
Boolean if the text field should gain the error state and update the colors.
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.
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.
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".
An optional className to apply to the <span> surrounding the matched text
when the highlight prop is enabled.
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.
An optional style to apply to the <span> surrounding the matched text
when the highlight prop is enabled.
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.
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.
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.
Boolean if the component should be rendered inline with
display: inline-flex instead of display: flex.
An optional className to apply to the input itself. The className prop
will be applied to the container <div> instead.
Hints at the type of data that might be entered by the user while editing the element or its contents
An optional style to apply to the input itself. The style prop will be
applied to the container <div> instead.
Specify that a standard HTML element should behave like a defined custom built-in element
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.
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.
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.
An optional className to apply to the label wrapper.
The key to use to extract a label from a result when the provided data list is a list of objects.
An optional style to apply to the label wrapper.
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.
An optional className to also apply to the listbox element showing all the matches.
An optional style to also apply to the listbox element showing all the matches.
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.
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"];
Boolean if the portal should be used.
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.
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.
Boolean if the component should gain flex: 1 1 auto; which is useful for
full-width behavior within flex containers.
The current theme type.
Boolean if the style object should include the transformOrigin value
based on the x and y positions.
The current underline direction.
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.
The key to use to extract a searchable value string from a result when the provided data list is a list of objects.
The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.
The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.
The container width margin to apply so that the element doesn't need to be directly on the container's edge.
The container height margin to apply so that the element doesn't need to be directly on the container's edge
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.
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.
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.
Generated using TypeDoc
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.
@since 2.1.0