Inputs
DropdownPro
FormKit Pro Quick Installation Guide 🚀
The dropdown input allows users to select a value from a list of options. Unlike native select elements, the dropdown input allows you to customize both its appearance and behavior.
The options prop can accept three different formats of values:
- An array of objects with
valueandlabelkeys (see example above) - An array of strings
['A', 'B', 'C'] - An object literal with key-value pairs
{ a: 'A', b: 'B', c: 'C' } - A function that returns any of the above
Empty options
If you assign options as an empty array, the input will be rendered in a disabled state.
Basic examples
Single-select
The dropdown input will render in single-select mode by default.
<script setup>const frameworks = [{ label: 'React', value: 'react' }, { label: 'Vue', value: 'vue' }, { label: 'Angular', value: 'angular' }, { label: 'Svelte', value: 'svelte' },]</script><template> <FormKit type="form" #default="{ value }" :actions="false"> <FormKit type="dropdown" name="framework" label="Choose your favorite frontend framework" placeholder="Backbone.js" popover :options="frameworks" /> <pre wrap>{{ value }}</pre> </FormKit></template>Multi-select
Dropdown inputs with the prop multiple set will render in multi-select mode.
<script setup>const sandwichToppings = [{ label: 'Lettuce', value: 'lettuce' }, { label: 'Tomato', value: 'tomato' }, { label: 'Onion', value: 'onion' }, { label: 'Pickles', value: 'pickles' }, { label: 'Cheese', value: 'cheese' }, { label: 'Mayo', value: 'mayo' }, { label: 'Mustard', value: 'mustard' }, { label: 'Ketchup', value: 'ketchup' }, { label: 'Avocado', value: 'avocado' }, { label: 'Bacon', value: 'bacon' }, { label: 'Ham', value: 'ham' }, { label: 'Turkey', value: 'turkey' }, { label: 'Chicken', value: 'chicken' }, { label: 'Roast Beef', value: 'roast-beef' }, { label: 'Salami', value: 'salami' }, { label: 'Pastrami', value: 'pastrami' }, { label: 'Tuna', value: 'tuna' }, { label: 'Egg Salad', value: 'egg-salad' }]</script><template> <FormKit type="form" #default="{ value }" :actions="false"> <FormKit type="dropdown" name="sandwich_toppings" label="Select as many toppings as you would like" placeholder="Lettuce, tomato, onion, etc." :options="sandwichToppings" multiple popover :value="['lettuce', 'tomato']" /> <pre wrap>{{ value }}</pre> </FormKit></template>Multi-select input value
Notice in the example above that because the multiple prop is set, the value prop must be an array.
Dynamic options
Instead of passing a static list to the options prop, options can be assigned dynamically.
In this example, the function, loadHorrorMovies, makes a request to the API for TMDB to load a list of horror movies. Assigning the function to the options prop will load the options when the end-user opens the listbox.
<script setup>async function loadHorrorMovies() { await new Promise((resolve) => setTimeout(resolve, 500)) const res = await fetch(`https://api.themoviedb.org/4/list/8219282?page=1&api_key=f48bcc9ed9cbce41f6c28ea181b67e14`) if (res.ok) { const data = await res.json() // Iterating over results to set the required // `label` and `value` keys. return data.results.map((result) => { return { label: result.title, value: result.id } }) } // If the request fails, we return an empty array. return []}</script><template> <FormKit name="horrorMovie" type="dropdown" label="Select a horror movie" placeholder="Example placeholder" popover :options="loadHorrorMovies" /></template>Always load on open
By default the dropdown will only load options asynchronously once (upon the listbox being expanded). Setting the prop always-load-on-open will cause the dropdown to load options every time the listbox is expanded.
<FormKit name="horrorMovie" type="dropdown" label="Select a horror movie" placeholder="Example placeholder" :options="loadHorrorMovies" popover always-load-on-open/>Load on created
The prop load-on-created will cause the dropdown to load options as soon as it is created.
<FormKit v-if="showDropdown" name="horrorMovie" type="dropdown" label="Select a horror movie" placeholder="Example placeholder" popover :options="loadHorrorMovies" load-on-created/>Pagination
A function assigned the options prop will be passed two arguments: page and hasNextPage. The page argument indicates the current page number, and hasNextPage is a callback function that indicates whether there are more pages to load.
<script setup>async function loadCurrentlyPopularMovies({ page, hasNextPage }) { await new Promise((resolve) => setTimeout(resolve, 500)) const res = await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=f48bcc9ed9cbce41f6c28ea181b67e14&language=en-US&page=${page}` ) if (res.ok) { const data = await res.json() if (page !== data.total_pages) hasNextPage() return data.results.map((item) => ({ label: item.title, value: item.id })) } return []}</script><template> <FormKit name="currentlyPopularMovie" type="dropdown" label="Choose a currently popular movie" :options="loadCurrentlyPopularMovies" popover placeholder="Terminator 12" /></template><style scoped></style>Load on scroll
If you would rather allow the user to load more options without having to click the Load more option at the bottom of the options list, you can set the load-on-scroll prop to true, and our function, loadCurrentlyPopularMovies will be called again:
<FormKit type="dropdown" label="Choose a currently popular movie" placeholder="Star Wars Part XV" :options="loadCurrentlyPopularMovies" popover load-on-scroll/>Option loader
FormKit's dropdown input also provides an optionLoader prop that allows you to rehydrate values that are not in the options list. In this example the dropdown is provided an initial value (two movie IDs). The optionLoader function is called for each value that is not in the options list.
<script setup>async function loadCurrentlyPopularMovies({ page, hasNextPage }) { const res = await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=f48bcc9ed9cbce41f6c28ea181b67e14&language=en-US&page=${page}` ) if (res.ok) { const data = await res.json() if (page !== data.total_pages) hasNextPage() return data.results.map((item) => ({ label: item.title, value: item.id })) } return []}// The function assigned to the `option-loader` prop will be called with the// value of the option as the first argument (in this case, the movie ID), and// the cached option as the second argument (if it exists).async function loadMovie(id, cachedOption) { if (cachedOption) return cachedOption const res = await fetch( `https://api.themoviedb.org/3/movie/${id}?api_key=f48bcc9ed9cbce41f6c28ea181b67e14&language=en-US` ) if (res.ok) { const data = await res.json() return { label: data.title, value: data.id, } } return { label: 'Error loading' }}</script><template> <FormKit type="dropdown" name="currentlyPopularMovie" label="Choose some movies you would like to see" placeholder="Avatar, Star Wars..." :options="loadCurrentlyPopularMovies" :option-loader="loadMovie" multiple popover :value="[597, 598]" /></template><style scoped></style>Notice in the example above that the optionLoader function is passed two arguments: the value of the selected option (in this case, the movie ID) and the cachedOption. The cachedOption prop is used for preventing unnecessary lookups. If the cachedOption is not null it means that the selected option has already been loaded, and you can return the cachedOption directly.
Option appearance
Unlike native select elements, the dropdown input can be customized via. markup.
Option slot
The dropdown input allows you to customize the look and feel of each option by using the option slot. In this example, we are using the option slot to display each option's asset, logo, and name:
<script setup>const frameworks = [{ label: 'React', value: 'react', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/react-logo.png'}, { label: 'Vue', value: 'vue', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/vue-logo.png'}, { label: 'Angular', value: 'angular', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/angular-logo.png',}, { label: 'Svelte', value: 'svelte', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/svelte-logo.png'}]</script><template> <FormKit type="dropdown" name="framework" label="Choose a frontend framework" placeholder="Example placeholder" popover :options="frameworks" > <template #option="{ option, classes }"> <div :class="`${classes.option} flex items-center`"> <img :src="option.asset" alt="optionAvatar" class="w-5 mr-2" /> <span> {{ option.label }} </span> </div> </template> </FormKit></template>Selection appearance
The dropdown input allows you to customize the look and feel of the selected option(s).
Selection appearance prop
When using the dropdown input as a multi-select, you can customize the look and feel of the selected options by setting the selection-appearance prop to either truncate (the default) or tags.
dropdown-selection-appearance
countries
<script setup>import countries from './countries.js'</script><template> <FormKit type="dropdown" label="Single-select" placheolder="Pick a country" :options="countries" popover value="FR" /> <FormKit type="dropdown" label="Truncate appearance" placheolder="Pick a country" :options="countries" popover multiple :value="['FR', 'GR', 'ES']" /> <FormKit type="dropdown" label="Tags appearance" placheolder="Pick a country" :options="countries" popover multiple selection-appearance="tags" :value="['FR', 'GR', 'ES']" /></template>Selection slot
If you only want to customize the display of the selected option, use the selection slot (as opposed to the option slot mentioned above):
<script setup>const frameworks = [ { label: 'React', value: 'react', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/react-logo.png', }, { label: 'Vue', value: 'vue', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/vue-logo.png', }, { label: 'Angular', value: 'angular', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/angular-logo.png', }, { label: 'Svelte', value: 'svelte', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/svelte-logo.png', },]</script><template> <FormKit name="framework" type="dropdown" label="Single-select" placeholder="Example placeholder" :options="frameworks" popover value="vue" > <!--SELECTION SLOT--> <template #selection="{ option, classes }"> <div class="flex items-center"> <img :src="option.asset" alt="optionAvatar" class="w-5 mr-2" /> <span :class="classes.selection"> {{ option.label }} </span> </div> </template> <!----> </FormKit> <FormKit type="dropdown" name="framework" label="Tags appearance" placeholder="Example placeholder" :options="frameworks" multiple selection-appearance="tags" :value="['vue', 'angular']" > <!--TAG SLOT--> <template #tag="{ handlers, option, classes }"> <div :class="classes.tag"> <img :src="option.asset" class="w-4 mr-1 bg-white rounded" /> <span :class="classes.tagLabel"> {{ option.label }} </span> <span @click.prevent="handlers.removeSelection(option)()" tabindex="-1" type="button" role="button" :class="classes.removeSelection" > <span :class="`${classes.closeIcon} ${classes.icon}`" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16"> <path d="M10,12.5c-.13,0-.26-.05-.35-.15L1.65,4.35c-.2-.2-.2-.51,0-.71,.2-.2,.51-.2,.71,0L10.35,11.65c.2,.2,.2,.51,0,.71-.1,.1-.23,.15-.35,.15Z" fill="currentColor" ></path> <path d="M2,12.5c-.13,0-.26-.05-.35-.15-.2-.2-.2-.51,0-.71L9.65,3.65c.2-.2,.51-.2,.71,0,.2,.2,.2,.51,0,.71L2.35,12.35c-.1,.1-.23,.15-.35,.15Z" fill="currentColor" ></path> </svg> </span> </span> </div> </template> <!--/TAG SLOT--> </FormKit></template>Single-select and tags only
The selection slot does not exist on the multi-select dropdown with selection appearance truncate.
Behavioral props
The following props allow you to customize the behavior of the dropdown input.
Empty Message
The dropdown input, by default, will be rendered in a disabled state if no options are passed. Optionally, you may pass the empty-message prop a message to display when no options are available:
<template> <div> <FormKit label="No options" :options="[]" type="dropdown" popover /> <FormKit label="No options, empty message set." :options="[]" type="dropdown" popover empty-message="No options here!" /> </div></template><style scoped></style>Selection Removable
If you would like to allow users to remove the selected value, set the selection-removable prop to true. This will render a close icon next to the selected value:
Single select only
The selection-removable prop cannot be used for multi-selects.
<script setup>const frameworks = [ { label: 'React', value: 'react' }, { label: 'Vue', value: 'vue' }, { label: 'Angular', value: 'angular' }, { label: 'Svelte', value: 'svelte' },]</script><template> <FormKit type="form" #default="{ value }" :actions="false"> <FormKit type="dropdown" name="framework" label="Choose a frontend framework" placeholder="Example placeholder" :options="frameworks" value="vue" popover selection-removable /> <pre wrap>{{ value }}</pre> </FormKit></template><style scoped></style>Open on remove
By default, when the selection-removable prop is set to true, the dropdown will not open after the selected value is removed. You can change this behavior by setting the open-on-remove prop to true:
<script setup>const frameworks = [ { label: 'React', value: 'react' }, { label: 'Vue', value: 'vue' }, { label: 'Angular', value: 'angular' }, { label: 'Svelte', value: 'svelte' },]</script><template> <FormKit type="form" #default="{ value }" :actions="false"> <FormKit type="dropdown" name="framework" label="Choose a frontend framework" placeholder="Example placeholder" :options="frameworks" value="vue" popover selection-removable open-on-remove /> <pre wrap>{{ value }}</pre> </FormKit></template><style scoped></style>Close on select
By default, when the multiple prop is set, the dropdown will not close after an option is selected. You can change this behavior by setting the close-on-select prop to true:
dropdown-close-on-select
countries
<script setup>import countries from './countries.js'</script><template> <FormKit type="form" #default="{ value }" :actions="false"> <FormKit type="dropdown" name="countries" label="Choose your favorite countries" placeholder="Afghanistan, Albania..." :options="countries" multiple popover :close-on-select="true" /> <pre wrap>{{ value }}</pre> </FormKit></template><style scoped></style>Open on focus
If you would like expand the listbox as soon as the dropdown input is focused, you can use the open-on-focus prop:
<script setup>const frameworks = [ { label: 'React', value: 'react' }, { label: 'Vue', value: 'vue' }, { label: 'Angular', value: 'angular' }, { label: 'Svelte', value: 'svelte' },]function focusDropdown() { document.querySelector('#dropdown').focus()}</script><template> <div> <FormKit type="button" @click="focusDropdown" >Click me to focus dropdown</FormKit > <FormKit id="dropdown" type="dropdown" name="framework" label="Choose a frontend framework" placeholder="Example placeholder" :options="frameworks" value="vue" popover open-on-focus /> </div></template><style scoped></style>Overscroll
When using the dropdown with static options, FormKit's dropdown also comes with a feature called overscroll. Setting the behavior prop to overscroll will render the listbox directly over the input to maximize the available size for the list:
dropdown-overscroll
countries
<FormKit type="dropdown" label="Select a country" :options="countries" behavior="overscroll" value="NP" placeholder="Select a country"/>Max
If you would like to limit the number of options that can be selected, you can use the max prop:
dropdown-max
countries
<script setup>import countries from './countries.js'</script><template> <FormKit type="form" #default="{ value }" :actions="false"> <FormKit type="dropdown" name="countries" label="Choose your favorite countries" placeholder="Afghanistan, Albania..." :options="countries" multiple popover max="3" :value="['AF', 'AL']" /> <pre wrap>{{ value }}</pre> </FormKit></template><style scoped></style>Props & Attributes
| Prop | Type | Default | Description |
|---|---|---|---|
options | any | [] | The list of options the user can select from. |
load-on-scroll | boolean | false | When set to true, the dropdown will try loading more options based on the end-user`s scroll position |
option-loader | function | null | Used for hydrating initial value, or performing an additional request to load more information of a selected option. |
empty-message | string | undefined | Renders a message when there are no options to display. |
selection-appearance | string | truncate | For multi-select dropdowns, this prop allows you to customize the look and feel of the selected options. Possible values are truncate (the default) or tags. |
selection-removable | boolean | false | For single-select dropdowns, this prop allows you to remove the selected value. |
open-on-remove | boolean | false | When the selection-removable prop is set to true, the dropdown will not open after the selected value is removed. You can change this behavior by setting the open-on-remove prop to true. |
close-on-select | boolean | false | When the multiple prop is set, the dropdown will not close after an option is selected. You can change this behavior by setting the close-on-select prop to true. |
open-on-focus | boolean | false | If you would like expand the listbox as soon as the dropdown input is focused, you can use the open-on-focus prop. |
options-appearance | string | undefined | For multi-select dropdowns, this prop allows you to customize the look and feel of the selected options. Possible values are default (the default) or checkbox. |
multiple | boolean | false | When set to true, the dropdown will allow the user to select multiple options. |
behavior | string | undefined | Renders the listbox directly over the input to maximize the available size for the list. |
always-load-on-open | boolean | false | Determines whether the dropdown should always load its options when opened or whether it should reference the options that were previously found when opening. |
load-on-created | boolean | false | When set to true, the dropdown will load the options when the node is created. |
max | number | string | undefined | If you would like to limit the number of options that can be selected, you can use the max prop (applies only to multi-select). |
deselect | boolean | true | When set to false, the end-user cannot deselect a selected option form the listbox. |
popover | boolean | false | Renders the input's listbox using the browser Popover API. |
| Show Universal props | |||
config | Object | {} | Configuration options to provide to the input’s node and any descendent node of this input. |
delay | Number | 20 | Number of milliseconds to debounce an input’s value before the commit hook is dispatched. |
dirtyBehavior | string | touched | Determines how the "dirty" flag of this input is set. Can be set to touched or compare — touched (the default) is more performant, but will not detect when the form is once again matching its initial state. |
errors | Array | [] | Array of strings to show as error messages on this field. |
help | String | '' | Text for help text associated with the input. |
id | String | input_{n} | The unique id of the input. Providing an id also allows the input’s node to be globally accessed. |
ignore | Boolean | false | Prevents an input from being included in any parent (group, list, form etc). Useful when using inputs for UI instead of actual values. |
index | Number | undefined | Allows an input to be inserted at the given index if the parent is a list. If the input’s value is undefined, it inherits the value from that index position. If it has a value it inserts it into the lists’s values at the given index. |
label | String | '' | Text for the label element associated with the input. |
name | String | input_{n} | The name of the input as identified in the data object. This should be unique within a group of fields. |
parent | FormKitNode | contextual | By default the parent is a wrapping group, list or form — but this props allows explicit assignment of the parent node. |
prefix-icon | String | '' | Specifies an icon to put in the prefixIcon section. |
preserve | Boolean | false | Preserves the value of the input on a parent group, list, or form when the input unmounts. |
preserve-errors | Boolean | false | By default errors set on inputs using setErrors are automatically cleared on input, setting this prop to true maintains the error until it is explicitly cleared. |
sections-schema | Object | {} | An object of section keys and schema partial values, where each schema partial is applied to the respective section. |
suffix-icon | String | '' | Specifies an icon to put in the suffixIcon section. |
type | String | text | The type of input to render from the library. |
validation | String, Array | [] | The validation rules to be applied to the input. |
validation-visibility | String | blur | Determines when to show an input's failing validation rules. Valid values are blur, dirty, and live. |
validation-label | String | {label prop} | Determines what label to use in validation error messages, by default it uses the label prop if available, otherwise it uses the name prop. |
validation-rules | Object | {} | Additional custom validation rules to make available to the validation prop. |
value | Any | undefined | Seeds the initial value of an input and/or its children. Not reactive. Can seed entire groups (forms) and lists.. |
Sections & slot data
You can target a specific section of an input using that section's "key", allowing you to modify that section's classes, HTML (via :sections-schema, or content (via slots)). Read more about sections here.
Selector structure
The main input structure with selector button and icons.
outer
wrapper
label
Select t-shirt color
inner
prefixIcon
prefix
selector
placeholder
Select t-shirt color
selectIcon
⌄
loaderIcon
⌛
closeIcon
×
listbox
(See listbox diagram)
suffix
suffixIcon
help
Turn sound effects on and off.
messages
message
Something wrong happened.
Click on a section to lock focus to the chosen section. Click locked section again to unlock.
Listbox structure
The dropdown options list rendered inside dropdownWrapper.
dropdownWrapper
listbox
emptyMessage
emptyMessageInner
No options to display.
listitem
selectedIcon
✔️
option
Gray
loadMore
loadMoreInner
loaderIcon
⏳
Click on a section to lock focus to the chosen section. Click locked section again to unlock.
Selection structure single
How a selected value displays inside the selector for single-select dropdowns.
selector
selectionWrapper
selection
option
Gray
Click on a section to lock focus to the chosen section. Click locked section again to unlock.
Selection structure truncate
Multi-select with selection-appearance="truncate" (default). Overflow selections show as "+N".
selector
selectorSelectionsWrapper
selectorSelections
selectorSelectionsItem
Gray
truncationCount
+1
Click on a section to lock focus to the chosen section. Click locked section again to unlock.
Selection structure tags
Multi-select with selection-appearance="tags". Selections display as removable tags.
selector
tagsWrapper
tags
tagWrapper
tag
tagLabel
Gray
removeSelection
×
Click on a section to lock focus to the chosen section. Click locked section again to unlock.
| Section-key | Description |
|---|---|
selector | The selector section is a button element that opens the dropdown options list. |
selection | Contains the selected option. |
listitem | A list item element that contains the option section. |
option | A div that contains the option content. |
listbox | The listbox section is a ul element that contains the options list. |
dropdownWrapper | Wraps the listbox section. A div that handles scrolling the listbox. |
optionLoading | A span element that is conditionally rendered within the selected option when loading is occurring. |
loaderIcon | An element for outputting an icon in the selector element when loading is occurring. |
selectIcon | An element for outputting an icon in the selector element when the dropdown is closed. |
selectedIcon | An element for outputting an icon next to the selected option when inside the listbox. |
loadMore | A list item element that is conditionally rendered at the bottom of the options list when there are more pages to load. |
loadMoreInner | A span element that acts as a wrapper for the loaderIcon within the loadMore section. |
emptyMessage | A list item element that is conditionally rendered when there are no options to display. |
emptyMessageInner | A span element that acts as a wrapper for the emptyMessage section. |
tagsWrapper | A div element that wraps the tags section. |
tags | A div element that contains the tags. |
tagWrapper | A div element that wraps the tag. |
tag | A div element that contains the tag label and removeSelection section. |
tagLabel | A span element that contains the tag label. |
removeSelection | A span element that contains the removeSelection icon. |
selectorSelectionsWrapper | A div element that wraps the selectorSelections section. |
selectorSelections | A div element that contains the selectorSelectionsItem sections. |
selectorSelectionsItem | A div element that contains the selectorSelectionsItem content. |
truncationCount | A div element that contains the truncationCount content. |
| Show Universal section keys | |
outer | The outermost wrapping element. |
wrapper | A wrapper around the label and input. |
label | The label of the input. |
prefix | Has no output by default, but allows content directly before an input element. |
prefixIcon | An element for outputting an icon before the prefix section. |
inner | A wrapper around the actual input element. |
suffix | Has no output by default, but allows content directly after an input element. |
suffixIcon | An element for outputting an icon after the suffix section. |
input | The input element itself. |
help | The element containing help text. |
messages | A wrapper around all the messages. |
message | The element (or many elements) containing a message — most often validation and error messages. |
Accessibility
All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues here:
- Semantic markup
- ARIA attributes
- Keyboard accessibility
- Focus indicators
- Color contrast with the provided theme
- Accessible labels, help text, and errors
Accessibility attributes
| Section Key | Attribute | Value | Description |
|---|---|---|---|
selector | tabindex | 0 | Prioritizes keyboard focus order by setting it to 0 |
aria-haspopup | listbox | Signals the presence of a pop-up listbox triggered by interaction. | |
aria-expanded | Indicates whether the dropdown element is currently expanded or collapsed. | ||
aria-controls | Links this element to the ID of the listbox element. | ||
aria-describedBy | Associate this element with descriptive text from another element. | ||
placeholder | aria-hidden | true | Makes this element not exposed to the accessibility API when no placeholder exists. |
removeSelection | tabindex | -1 | Prioritizes keyboard focus order by setting it to -1 |
aria-controls | Links this element to the ID of the input element. | ||
selections | aria-live | polite | Annouces to screen readers that this element was dynamically updated without interrupting the current task. |
aria-hidden | true | Makes this element not exposed to the accessibility API. | |
selectionsItem | aria-hidden | true | Makes this element not exposed to the accessibility API when last visible index and index are greater than last visible index. |
tagWrapper | tabindex | 0 | Prioritizes keyboard focus order by setting it to 0 |
tag | tabindex | 0 | Prioritizes keyboard focus order by setting it to 0 |
tagsWrapper | aria-live | polite | Annouces to screen readers that this element was dynamically updated without interrupting the current task. |
| Universal Accessibility Attributes | |||
label | label | for | Associates a label to an input element. Users can click on the label to focus the input or to toggle between states. |
input | input | disabled | Disables an HTML element, preventing user interaction and signaling a non-interactive state. |
aria-describedby | Associates an element with a description, aiding screen readers. | ||
aria-required | Added when input validation is set to required. | ||
icon | icon | for | Links icon to input element when icon in rendered as a label. |
Keyboard Interactions
| Keyboard Event | Description |
|---|---|
| Enter | Opens the listbox when the input is focused. Selects an item when a list item is focused |
| Space | Opens the listbox when the input is focused. Selects an item when a list item is focused |
| Esc | Closes the listbox when the input is focused. |
| ↑ | Navigates to previous list item in list box. Closes listbox if most-previous item is selected |
| ↓ | Opens the listbox when input is focused. Navigates to next list item in list box. |
| Universal Keyboard Events | |
| Tab | Moves the focus to the next focusable element on the page. |
| Shift+Tab | Moves the focus to the previous focusable element on the page. |