Combobox A combobox is a combination of a text input and a listbox that displays the options available to the user.
Luke Skywalker
Anakin Skywalker
Obi Wan Kenobi
Qui-Gon Jinn
Mace Windu
Yoda
Add these before the </body> tag in your site/page settings
< script src = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/combobox.js" > </ script > Full keyboard navigation Filters options as you type NavRoot [s-combobox="root"]Input List [s-combobox="list"] The TOC component needs to be inside a Nav landmark (add Div and change tag to Nav). The list and list item need to be actual List element and List item elements.
The Nav element either need s to have the attribute aria-label with the value of a title, or aria-labelledby with the value of the ID of a text element that acts as its title. If none of these exist, a default aria-label of "Table of Contents" is added.
Main Attributes:
s-combobox = root - The parent div that holds the input and list
s-combobox = list - The List that contains all the options (doesn't have to be a List Element, it can be a collection)
Options:
s-prevent-submit - Prevents submitting a parent form when "Enter" is pressed
s-active-class - Change the active class names that is added to the selected item when navigating with a keyboard. Default: s-active
Events
No custom events are exported for this component.
Methods
No custom methods are exported for this component.
Use Cases
No special use cases added yet
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"01735251-51f7-aa2e-5908-b7874959b730","type":"Block","tag":"div","classes":["f3a5fb4f-706e-cc80-cb75-901373a0fb1a"],"children":["9b56963a-6c95-a761-68ad-4ea4017e325b","671c51cf-c84d-c839-20ce-780faef35091"],"data":{"text":false,"tag":"div","xattr":[{"name":"s-combobox","value":"root"},{"name":"s-prevent-submit","value":""}]}},{"_id":"9b56963a-6c95-a761-68ad-4ea4017e325b","type":"FormTextInput","tag":"input","classes":["95c6965c-782f-5fb2-8a66-6e60641619fe"],"children":[],"data":{"form":{"name":"Field","type":"input","passwordPage":false},"attr":{"id":"field","name":"field","maxlength":256,"data-name":"Field","placeholder":"Placeholder","disabled":false,"type":"text","required":true,"autofocus":false}}},{"_id":"671c51cf-c84d-c839-20ce-780faef35091","type":"List","tag":"ul","classes":["9f6f079a-a349-6593-b7e2-334cb10d669b"],"children":["355ead68-a557-4f56-dc88-64ae256e2ea9","22d422b8-e858-e6ab-f443-fbee7239b841","b9d62ad2-32e6-4b26-5726-1473b76eb631","f10f9ec4-c424-f719-8586-3b901aee09a4","72273eb8-37d6-61d7-27cb-b3096dee8672","ae802238-8811-cc7c-66d5-ef6a43ff3128"],"data":{"tag":"ul","list":{"type":"list","unstyled":true},"xattr":[{"name":"s-combobox","value":"list"}]}},{"_id":"355ead68-a557-4f56-dc88-64ae256e2ea9","type":"ListItem","tag":"li","classes":["6d63ea9f-aafa-bfee-4f61-591e1bea70a0"],"children":["06ab5896-f60f-c724-4d85-c33e1314534c"],"data":{"list":{"type":"item"},"text":false}},{"_id":"06ab5896-f60f-c724-4d85-c33e1314534c","type":"Block","tag":"div","classes":[],"children":["53889ecf-695f-9b2e-a812-564f838373e7"],"data":{"text":true,"tag":"div","xattr":[{"name":"s-combobox","value":"text"}]}},{"_id":"53889ecf-695f-9b2e-a812-564f838373e7","text":true,"v":"Luke Skywalker"},{"_id":"22d422b8-e858-e6ab-f443-fbee7239b841","type":"ListItem","tag":"li","classes":["6d63ea9f-aafa-bfee-4f61-591e1bea70a0"],"children":["a1203177-8e42-67e3-6dec-809495464c66"],"data":{"list":{"type":"item"},"text":false}},{"_id":"a1203177-8e42-67e3-6dec-809495464c66","type":"Block","tag":"div","classes":[],"children":["b368c304-5603-8f3f-13b9-d53242c93041"],"data":{"text":true,"tag":"div","xattr":[{"name":"s-combobox","value":"text"}]}},{"_id":"b368c304-5603-8f3f-13b9-d53242c93041","text":true,"v":"Anakin Skywalker"},{"_id":"b9d62ad2-32e6-4b26-5726-1473b76eb631","type":"ListItem","tag":"li","classes":["6d63ea9f-aafa-bfee-4f61-591e1bea70a0"],"children":["c3f3bab3-b095-67dd-c68c-73a899201442"],"data":{"list":{"type":"item"},"text":false}},{"_id":"c3f3bab3-b095-67dd-c68c-73a899201442","type":"Block","tag":"div","classes":[],"children":["48a187e3-75eb-83de-e9bd-c937087ccf89"],"data":{"text":true,"tag":"div","xattr":[{"name":"s-combobox","value":"text"}]}},{"_id":"48a187e3-75eb-83de-e9bd-c937087ccf89","text":true,"v":"Obi Wan Kenobi"},{"_id":"f10f9ec4-c424-f719-8586-3b901aee09a4","type":"ListItem","tag":"li","classes":["6d63ea9f-aafa-bfee-4f61-591e1bea70a0"],"children":["716c630f-29e9-162e-c1e4-790b8f95d279"],"data":{"list":{"type":"item"},"text":false}},{"_id":"716c630f-29e9-162e-c1e4-790b8f95d279","type":"Block","tag":"div","classes":[],"children":["e8941572-8c2c-ad23-a5c8-3e75b3734ee6"],"data":{"text":true,"tag":"div","xattr":[{"name":"s-combobox","value":"text"}]}},{"_id":"e8941572-8c2c-ad23-a5c8-3e75b3734ee6","text":true,"v":"Qui-Gon Jinn"},{"_id":"72273eb8-37d6-61d7-27cb-b3096dee8672","type":"ListItem","tag":"li","classes":["6d63ea9f-aafa-bfee-4f61-591e1bea70a0"],"children":["7c4881e4-3899-4e1a-cd10-5f50b0004aa4"],"data":{"list":{"type":"item"},"text":false}},{"_id":"7c4881e4-3899-4e1a-cd10-5f50b0004aa4","type":"Block","tag":"div","classes":[],"children":["d58424db-8805-4a8a-5b4d-704f984c8523"],"data":{"text":true,"tag":"div","xattr":[{"name":"s-combobox","value":"text"}]}},{"_id":"d58424db-8805-4a8a-5b4d-704f984c8523","text":true,"v":"Mace Windu"},{"_id":"ae802238-8811-cc7c-66d5-ef6a43ff3128","type":"ListItem","tag":"li","classes":["6d63ea9f-aafa-bfee-4f61-591e1bea70a0"],"children":["411dc8bd-3fd3-a680-6d0c-679d15195062"],"data":{"list":{"type":"item"},"text":false}},{"_id":"411dc8bd-3fd3-a680-6d0c-679d15195062","type":"Block","tag":"div","classes":[],"children":["5464d4f1-d1b9-06cb-96f9-06c65aa9a4eb"],"data":{"text":true,"tag":"div","xattr":[{"name":"s-combobox","value":"text"}]}},{"_id":"5464d4f1-d1b9-06cb-96f9-06c65aa9a4eb","text":true,"v":"Yoda"}],"styles":[{"_id":"f3a5fb4f-706e-cc80-cb75-901373a0fb1a","fake":false,"type":"class","name":"combobox","namespace":"","comb":"","styleLess":"position: relative;","variants":{},"children":[],"createdBy":"5de3f22e747d41cf4377aef1","origin":null,"selector":null},{"_id":"95c6965c-782f-5fb2-8a66-6e60641619fe","fake":false,"type":"class","name":"combobox_field","namespace":"","comb":"","styleLess":"height: auto; padding-top: 1em; padding-right: 1.5em; padding-bottom: 1em; padding-left: 1.5em; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 58.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 58.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 58.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 58.67%, 1.00); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background-color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 1rem; color: @raw<|inherit|>;","variants":{},"children":[],"createdBy":"5de3f22e747d41cf4377aef1","origin":null,"selector":null},{"_id":"9f6f079a-a349-6593-b7e2-334cb10d669b","fake":false,"type":"class","name":"combobox_list","namespace":"","comb":"","styleLess":"position: absolute; display: block; overflow: scroll; width: 100%; max-height: 18rem; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 58.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 58.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 58.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 58.67%, 1.00); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;","variants":{},"children":[],"createdBy":"5de3f22e747d41cf4377aef1","origin":null,"selector":null},{"_id":"6d63ea9f-aafa-bfee-4f61-591e1bea70a0","fake":false,"type":"class","name":"combobox_list-item","namespace":"","comb":"","styleLess":"padding-top: 0.75em; padding-right: 1.5em; padding-bottom: 0.75em; padding-left: 1.5em; transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 100.00%, 0.06);"},"main_focus-visible":{"styleLess":"outline-color: white; outline-offset: -3px; outline-style: solid; outline-width: 3px;"}},"children":["c9574922-566b-48a0-ee8c-3aa72d73a66f"],"createdBy":"5de3f22e747d41cf4377aef1","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
