# jb-select > select web component Latest version **9.1.0** (published 2026-09-12) · MIT license · 0 weekly downloads ## Install ```sh npm install jb-select pnpm add jb-select yarn add jb-select bun add jb-select ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 9.1.0 | | Published | 2026-09-12 | | First published | 2020-08-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 1022.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | mohammad javad bathaei | | Maintainers | javadbat | | Keywords | jb, jb-select, select, autocomplete, dropdown, select box, web component, react component | ## Links - npm: https://www.npmjs.com/package/jb-select - Repository: https://github.com/javadbat/jb-select - Homepage: https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect - Issues: https://github.com/javadbat/jb-select/issues - npm.io page: https://npm.io/package/jb-select ## Dependencies (4) - [jb-core](https://npm.io/package/jb-core.md) ^0.37.0 - [jb-icons](https://npm.io/package/jb-icons.md) ^2.5.0 - [jb-popover](https://npm.io/package/jb-popover.md) ^2.0.0 - [jb-validation](https://npm.io/package/jb-validation.md) ^1.0.0 ## Recent versions - 9.1.0 (latest) — 2026-09-12 - 9.0.0 — 2026-09-11 - 8.1.1 — 2026-08-26 - 8.1.0 — 2026-08-22 - 8.0.0 — 2026-08-13 - 7.4.3 — 2026-07-27 - 7.4.2 — 2026-07-27 - 7.4.1 — 2026-07-26 - 7.4.0 — 2026-07-18 - 7.3.3 — 2026-06-20 - 7.3.2 — 2026-06-20 - 7.3.1 — 2026-06-02 - 7.3.0 — 2026-06-01 - 7.2.1 — 2026-05-19 - 7.2.0 — 2026-05-16 - … 88 more at https://npm.io/package/jb-select/versions ## README # jb-select [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-select) [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-select/main/LICENSE) [![NPM Version](https://img.shields.io/npm/v/jb-select)](https://www.npmjs.com/package/jb-select) ![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-select) pure js standalone select box web-component. - with search ability - mobile friendly and responsive - customizable style with CSS variable - support typescript - support both RTL & LTR direction pages - custom validation - support option dom customization - can get array of js object as a option list and extract value and label from it to show it to user. ## When to use Use `jb-select` when the user must choose one or more values from a known option list and you need search, validation, custom option content, mobile-friendly popover behavior, or form association. See the [basic selection demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal) for the default interaction. Use `jb-option` for hand-written options. Use `jb-option-list` when the options come from a JavaScript array and you want callbacks to extract title, value, or custom DOM. Use `jb-select/listbox` when the options should remain visible instead of opening in a dropdown. It reuses the same `jb-option` elements and supports single and multiple selection. See the [Listbox web-component README](listbox/web-component/README.md) and [Listbox React README](listbox/react/README.md). ## Demo - Explore the [select examples](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal), including [multiple values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple), [validation](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--required), [custom selected content](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--custom-selected-value-render), and [popover positioning](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--fixed-popover-position). - Try the standalone [CodePen](https://codepen.io/javadbat/pen/abpjKVP) or [CodeSandbox](https://3f63dj.csb.app/samples/jb-select) examples. ## Using With JS Frameworks Other integrations: Angular · Vue · Nuxt · Svelte · SvelteKit · SolidJS · Lit · Next.js · Astro · Blazor · Server-rendered templates · WordPress · Alpine.js and HTMX ## Installation ### using npm: ```sh npm i jb-select ``` Import the select and option registrations you use: ```js import 'jb-select'; import 'jb-select/option'; import 'jb-select/option-list'; import 'jb-select/listbox'; ``` ### using cdn: ```html ``` then in your HTML file just use ```html ``` ## API reference ### `jb-select` attributes | name | type | default | description | | --- | --- | --- | --- | | [`value`](#get-value) | `string` | `""` | Initial selected value from markup. Use the property for non-string values or runtime updates; see [controlled values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-value). | | `label` | `string` | `""` | Visible label text and accessible aria label; see the [basic selection demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal). | | `message` | `string` | `""` | Helper text shown when no validation error is visible. | | `name` | `string` | `""` | Form field name. | | [`multiple`](#multiple) | `boolean` | `false` | Enables multiple selection; see the [multiple selection demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple). | | [`placeholder`](#placeholder) | `string` | `""` | Placeholder when no value is selected. | | `search-placeholder` | `string` | `"search"` | Placeholder used by the mobile search input while open. | | [`required`](#validation) | `boolean` | `false` | Enables required validation; see the [required demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--required). | | [`error`](#validation) | `string` | `""` | External validation error message; see the [error demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-error). | | `clearable` | `boolean` | `true` | Controls whether the clear button is available; set it to `false` to hide the button. | | `disable-auto-validation` | `boolean` | `false` | Disables automatic validation on user interactions. | | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `md` style defaults | Visual size variant; see [size variants](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--size-variants). | ### `jb-select` properties | name | type | readonly | description | | --- | --- | --- | --- | | [`value`](#get-value) | `TValue \| TValue[] \| null` | no | Canonical selected value. In multiple mode this is an array; see [controlled values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-value). | | `textValue` | `string` | no | Current search/filter text; see the [dynamic list demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--dynamic-list). | | `selectedOptionTitle` | `string` | yes | Visible title of the selected option or selected options. | | `validation` | `ValidationHelper>` | yes | Validation helper from `jb-validation`; set `validation.list` for custom rules. | | `callbacks` | `JBSelectCallbacks` | no | Callback map, including `getSelectedValueDOM`. | | `multiple` | `boolean` | no | Enables or disables multiple selection; see [multiple values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple). | | `disabled` | `boolean` | no | Disables the select and closes the option list; see the [disabled demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--disabled). | | `required` | `boolean` | no | Enables required validation; see [validation](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--required). | | `initialValue` | `TValue \| null` | no | Default and reset value. It initializes `value` until the live value is explicitly set; see [initial value](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--initial-value). | | `isDirty` | `boolean` | yes | `true` when current `value` differs from `initialValue`. | | `popoverPosition` | `'fixed' \| 'absolute'` | no | Controls how the option popover is positioned. See the [popover positioning guide](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbselect-popover-positioning--docs) and [fixed-position demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--fixed-popover-position). | | `validationMessage` | `string` | yes | Current validation message. | ### `jb-select` methods | name | returns | description | | --- | --- | --- | | `checkValidity()` | `boolean` | Runs validation without showing the error message. Dispatches `invalid` when invalid; see the [event and validation demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `reportValidity()` | `boolean` | Runs validation and shows the first error message. Dispatches `invalid` when invalid; see [validation](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-error). | | `reset()` | `void` | Restores `initialValue` and clears displayed validation. | | `focus()` | `void` | Focuses the search input and opens the option list; see the [basic selection demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal). | | `blur()` | `void` | Closes the option list, clears search text, and validates; see the [event demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | ### `jb-option` API | name | type | description | | --- | --- | --- | | `value` | attribute/property | Option value. Use the property for object values; see [object options](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--option-object). | | `selected` | property | Whether the option is selected; see the [normal selection demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal). | | `hidden` | property | Whether the option is hidden by filtering; see the [dynamic list demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--dynamic-list). | | `isActive` | property | Whether the option is the active keyboard/hover target. | | `optionContentText` | property | Text used for default filtering. | | `toggleOption()` | method | Selects or deselects the option using the normal click behavior; see [multiple selection](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple). | ### `jb-option-list` API | name | type | description | | --- | --- | --- | | `optionList` | `TOption[]` property | Source array used to render options; see the [option-list demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple-with-option-list). | | `optionListDom` | property | Rendered `jb-option` elements. | | `setCallback(key, callback)` | method | Sets `getTitle`, `getValue`, or `getContentDOM`; see [custom option rendering](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--custom-option-render). | ## set option list if you want to add option to jb-select, you have 2 way: For help choosing between the two approaches, see the [options guide](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbselect-options--docs), [static option demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--option-as-children), and [array option-list demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--option-object). - use `` tag - use `` ### using `jb-option`: using `jb-option` is quite an easy job: ```html Male Female Other ``` its easy and simple to customization options display content. for example you can set option value like this for user to pick color: ```html red ``` you can also assign non-string value to option in js in some advance scenario: ```js document.querySelector('jb-option').value = { name:"foo", age:10 } ``` by doing this, calling a `document.querySelector('jb-select').value` will give you the object in javascript ### using `jb-option-list` this web-component is an assistance for developers to manage their option list in javascript without involving too much HTML in their logic ```html ``` ```js const optionListElement = document.querySelector('jb-option-list') optionListElement.optionList = [1,2,3] //or you can provide object as a option //if you provide array of object to optionList. remember to set callbacks as well so component would know how to extract label and value from it. optionListElement.optionList = [ { id:1, productName:"book" }, { id:2, productName:"pen" }, ] //if you set an array of object into optionList you must set callback to set the visible content of an option optionListElement.setCallback("getTitle", (option)=>option.productName); //or if you have more complex ui optionListElement.setCallback("getTitle", (option)=>{ const optionContent = document.createElement("div"); optionContent.innerHTML = `${option.id}-${option.productName}`; return optionContent; }); //or optionally you can set the value getter callback if you want one field of an object as a value optionListElement.setCallback("getValue", (option)=>option.id); ``` `jb-option-list` use `jb-option` inside itself and just help you to manage your option list easier in js For the standalone `jb-option` API and CSS variables, see [jb-option README](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbselect-jboption-readme--docs). ## get value Read `.value` and `selectedOptionTitle` after selection; see the [value demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-value). its simple like any other form element use `.value` of dom ```javascript //get value document.querySelector('jb-select').value; // if you use a object in option list you can get selected option title beside value document.querySelector('jb-select').selectedOptionTitle; ``` ## set value Assign a string or object to `.value`, or use the `value` attribute for plain strings. See [controlled values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-value) and [object values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--option-object). to select value in your code you have 2 option: 1- set it via dom assign `dropDownElement.value = yourValue` 2- set through dom attribute `` remember set value as attribute if your option is a plain string but in direct assign like first option you can attach both string or object value assignation ### placeholder Use `placeholder` and `search-placeholder` for empty and mobile search states; see the [normal select demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal). you can set placeholder when data is empty. `search-placeholder`work on mobile device when user focus on select and modal open this text will be placed in top search input box ```html ``` ## Multiple by just set multiple Attribute (like native select). For React and web-component examples, see the [multiple selection guide](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbselect-multiple-selection--docs), [multiple demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple), and [checkbox demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--multiple-with-checkbox). ```html ``` you can also use `jb-checkbox` if you want to add checkbox to your multi select. ```html ``` ## Responsive positioning and RTL Use `popoverPosition="fixed"` when the select is inside a clipped or scrollable container. Compare the [fixed popover](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--fixed-popover-position), [scrollable container](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--fixed-popover-in-scrollable-container), and [positioned container](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--fixed-popover-in-positioned-container) demos. The [RTL demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--rtl) covers right-to-left layout. Use the [size variants](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--size-variants) for compact or spacious controls. ## Advanced value and option behavior See [initial/reset behavior](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--initial-value), [controlled value precedence](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--initial-value-does-not-override-value), [boolean values](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--boolean-value), and [missing options](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--missing-option) for less common data flows. For mobile sizing, see [popover height](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--popover-height). ## Validation Use `required`, `error`, `checkValidity()`, and `reportValidity()` for validation; see the [required](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--required) and [error](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--with-error) demos. since select has a limited value options, validation have different story here. the only validation i really necessary here is required that indicate if user must select a value before he can move on so pass `required` attribute in dom then call `checkValidity` function like all other jb web component family. but if you need more customize validation just read [jb-validation](https://github.com/javadbat/jb-validation) you can also set `error` attribute to pass error directly to the component ```html ``` ## Change empty state shape Customize the no-results content with `slot="empty-list-message"`; see the [empty list demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--empty-list). when the searched value in select is not found, there is an open dropdown with the not found message. you can customize this entire section by adding a div with the `slot="empty-list-message"` like the example the below: ```html
put your customize html here
``` ### Add Icon or Any Element into box Use `slot="inline-start"` for leading icons or custom content; see the [custom option demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--custom-option). sometimes you want to add icon into the select box before value box. you can customize this entire section by adding a div or any other Tag with the `slot="inline-start"` like the example the below: ```html
``` ## Callbacks you can add callbacks to manage the way component works for example if you have array of object as a option list and want to show custom title for option you can use: ```js //to customizing selected value dropDownElement.callbacks.getSelectedValueDOM = (option)=>{ const optionElement = document.createElement('div'); optionElement.classList.add('selected-value'); optionElement.innerHTML = ''+' '+option.name; return optionElement; } ``` remember you must set this callback before set value and option list For a complete React and web-component example, styling guidance, and the single-select limitation, see the [custom selected value content guide](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbselect-custom-selected-value-content--docs) and [custom renderer demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--custom-selected-value-render). ## Events | event | cancelable | when it fires | | --- | --- | --- | | `change` | yes | When selected value changes. Call `event.preventDefault()` to cancel a single-select change and restore the previous value; see the [event demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `input` | no | When the user types in the search input; see the [event demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `keyup` | no | Re-dispatched from the search input. Arrow keys navigate options and Enter toggles the active option; see [keyboard interaction](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `keypress` | no | Re-dispatched from the search input; see the [event demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `invalid` | no | When `checkValidity()` or `reportValidity()` finds an invalid value; see [validation](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `load` | no | In `connectedCallback`, before `init`; see the [event demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | | `init` | no | In `connectedCallback`, after initial setup; see the [event demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test). | ```js dropDownElement.addEventListener('change',(e)=>{/*your function*/}); dropDownElement.addEventListener('keyup',(e)=>{/*your function*/}); dropDownElement.addEventListener('input',(e)=>{/*your function*/}); ``` ## Parts See the [select style gallery](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect-style--gallery) for these parts in context. | part | description | | --- | --- | | `selected-value` | Internal `selected-value`. | | `search-input` | Internal `search-input`. | | `arrow-icon` | Internal `arrow-icon`. | | `popover` | Internal `popover`. | ## Slots | slot | description | | --- | --- | | default | Option content. Use `jb-option` or `jb-option-list` children; see the [option examples](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--option-as-children). | | `inline-start` | Content rendered before the selected value/search area; see the [custom option demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--custom-option). | | `select-arrow-icon` | Replaces the default arrow icon. | | `empty-list-message` | Custom empty-state content shown when no option is visible; see the [empty list demo](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--empty-list). | ## Accessibility notes Provide a meaningful `label`, keep option content readable, and preserve keyboard interaction when customizing slots. The [normal select](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--normal) and [event](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect--event-test) demos show the accessible focus and keyboard flow. ## set custom style in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc. See the [select style gallery](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect-style--gallery). if you want to set a custom style to this web-component all you need is to set CSS variable in parent scope of web-component | CSS variable name | description | | ------------- | ------------- | | --jb-select-margin | web-component margin default is `0 0` | | --jb-select-width | change the select component width default is `100%` | | --jb-select-rounded | main value for corner radius it must be a single value like `1rem` not `1rem 1rem` used for all `border-radius`| | --jb-select-box-border-radius | box `border-radius` it's full value so you can change it whatever you want | | --jb-select-border-color | border color of select in normal mode | | --jb-select-border-color-selected | border color when user select a value from list | | --jb-select-bg-color | background color of input | | --jb-select-list-max-height | max height of option list | | --jb-select-border-bottom-width | width of border bottom | | --jb-select-border-width | width of border | | --jb-select-label-color | color of label | | --jb-select-label-font-size | label font size default is `0.8em` | | --jb-select-label-font-weight | label font weight | | --jb-select-bg-color-selected | set background color for selected status | | --jb-select-selected-value-font-size | font-size of selected value default is `1.1rem` | | --jb-select-message-color | message text color | | --jb-select-message-font-size | font size of message default is `0.7em` | | --jb-select-placeholder-color | placeholder color default is `initial` | | --jb-select-placeholder-font-size | placeholder font-size default is `1.1rem` | | --jb-select-height | jb-select box height; overrides the shared `--jb-control-height-md` default | | --jb-select-list-padding | padding of opened list box default is `1rem 0` | | --jb-select-mobile-input-bg-color | background color search input when open in mobile | | --jb-select-list-scroll-color | list item scroll color | | --jb-select-list-scroll-border-radius | list item scroll border-radius default is `4px` | | --jb-select-box-margin | margin of internal element called select box that wrapper display element of form in one box | | --jb-select-arrow-icon-margin | Customize arrow icon margin. | | --jb-select-base-z-index | Customize base z index. | | --jb-select-bg-color-disabled | Customize bg color disabled. | | --jb-select-border-color-focus | Customize border color focus. | | --jb-select-box-padding-end | Customize box padding end. | | --jb-select-clear-icon-color | Clear icon color; defaults to the clear button's current color. | | --jb-select-clear-icon-size | Clear icon size. | | --jb-select-clear-icon-size-xs | Clear icon size for `size="xs"`. | | --jb-select-clear-icon-size-sm | Clear icon size for `size="sm"`. | | --jb-select-empty-list-placeholder-color | Customize empty list placeholder color. | | --jb-select-height-lg | Customize large height; overrides `--jb-control-height-lg`. | | --jb-select-height-sm | Customize small height; overrides `--jb-control-height-sm`. | | --jb-select-height-xl | Customize extra-large height; overrides `--jb-control-height-xl`. | | --jb-select-height-xs | Customize extra-small height; overrides `--jb-control-height-xs`. | | --jb-select-inline-space | Inline label/message spacing derived from rounded value. | | --jb-select-inline-slots-padding | Inline slot padding. | | --jb-select-inline-slots-padding-xs | Inline slot padding for `size="xs"`. | | --jb-select-inline-slots-padding-sm | Inline slot padding for `size="sm"`. | | --jb-select-inline-slots-padding-lg | Inline slot padding for `size="lg"`. | | --jb-select-inline-slots-padding-xl | Inline slot padding for `size="xl"`. | | --jb-select-input-font-size | Customize input font size. | | --jb-select-input-font-size-lg | Customize input font size lg. | | --jb-select-input-font-size-sm | Customize input font size sm. | | --jb-select-input-font-size-xl | Customize input font size xl. | | --jb-select-input-font-size-xs | Customize input font size xs. | | --jb-select-label-font-size-lg | Customize label font size lg. | | --jb-select-label-font-size-sm | Customize label font size sm. | | --jb-select-label-font-size-xl | Customize label font size xl. | | --jb-select-label-font-size-xs | Customize label font size xs. | | --jb-select-label-margin | Customize label margin. | | --jb-select-message-box-display | Customize message box display. | | --jb-select-message-color-error | Customize message color error. | | --jb-select-message-font-size-lg | Customize message font size lg. | | --jb-select-message-font-size-sm | Customize message font size sm. | | --jb-select-message-font-size-xl | Customize message font size xl. | | --jb-select-message-font-size-xs | Customize message font size xs. | | --jb-select-overlay-bg-color | Customize overlay bg color. | | --jb-select-rounded-lg | Customize rounded lg. | | --jb-select-rounded-sm | Customize rounded sm. | | --jb-select-rounded-xl | Customize rounded xl. | | --jb-select-rounded-xs | Customize rounded xs. | | --jb-select-selected-value-font-size-lg | Customize selected value font size lg. | | --jb-select-selected-value-font-size-sm | Customize selected value font size sm. | | --jb-select-selected-value-font-size-xl | Customize selected value font size xl. | | --jb-select-selected-value-font-size-xs | Customize selected value font size xs. | | --jb-select-selected-value-padding | Customize selected value padding. | | --jb-select-selected-value-padding-lg | Customize selected value padding lg. | | --jb-select-selected-value-padding-sm | Customize selected value padding sm. | | --jb-select-selected-value-padding-xl | Customize selected value padding xl. | | --jb-select-selected-value-padding-xs | Customize selected value padding xs. | | --jb-select-value-color | Customize value color. | | --jb-select-value-color-disabled | Customize value color disabled. | ### jb-option CSS variables For usage examples and the standalone option API, see [jb-option README](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbselect-jboption-readme--docs). | CSS variable name | description | | --- | --- | | --jb-option-border-radius | Option border radius. | | --jb-option-padding | Option padding. | | --jb-option-font-size | Option font size. | | --jb-option-min-height | Option minimum height. | | --jb-option-color | Option text color. | | --jb-option-color-active | Option text color on hover or keyboard navigate. | | --jb-option-background-color | Option background color. | | --jb-option-background-color-active | Option background color on hover or keyboard navigate. | ## Related Docs - see [`jb-select/react`](https://github.com/javadbat/jb-select/tree/main/react) if you want to use this component in react. - see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components. - use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component. ## AI agent notes This package includes [`web-component/custom-elements.json`](./web-component/custom-elements.json) for the select, [`option/web-component/custom-elements.json`](./option/web-component/custom-elements.json) for the option, and [`option-list/web-component/custom-elements.json`](./option-list/web-component/custom-elements.json) for the option list, so documentation tools, IDEs, and AI coding agents can discover their attributes, properties, events, slots, CSS variables, and public methods. The package also exposes `"customElements": "web-component/custom-elements.json"` in `package.json`, while the option and option-list package metadata point to their own manifests. This field is documented by the Custom Elements Manifest project in its [Referencing manifests from npm packages](https://github.com/webcomponents/custom-elements-manifest#referencing-manifests-from-npm-packages) section. In `custom-elements.json`, the `exports` array describes what each module makes available: | kind | meaning | | --- | --- | | `js` | A JavaScript/TypeScript export from the module, such as `JBSelectWebComponent`. | | `custom-element-definition` | The custom element registration for a tag name, such as `jb-select`. | - Import `jb-select` before using ``, `jb-select/option` before using ``, and `jb-select/option-list` before using ``. - Use `.value` for the canonical selected value; use `selectedOptionTitle` only for display text. - Use `jb-option` for static options and `jb-option-list` for array-driven options. - Use `multiple` when `.value` should be an array. - Set `error` for externally controlled validation errors; the component observes the attribute and updates its validation UI. --- _Source: https://npm.io/package/jb-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._