Select
Ready
A customizable dropdown component that allows users to select one or more options from a list.
Loading
Code
HTML
import { NbhdSelect } from '@fbin-web/neighborhood-core';<nbhd-select aria-label="Descriptive text about this input" label="Select form field label">
</nbhd-select>React
import { NbhdSelect } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdSelect
ariaLabel="Descriptive text about this input"
label="Select form field label"></NbhdSelect>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
selectedValues
|
selected-values
|
string[]
|
[]
|
Array of currently selected option values. |
items
|
OptionData[]
|
[]
|
Array of options to display in the select. Each item should have name and value properties. | |
multiple
|
multiple
|
boolean
|
false
|
Allows multiple options to be selected. |
hidePlaceholder
|
hide-placeholder
|
boolean
|
false
|
Hides the placeholder and combobox when enabled. |
placeholder
|
placeholder
|
string
|
Select an option
|
Placeholder text displayed when no option is selected. |
dark
|
dark
|
boolean
|
false
|
Applies dark theme styling to the select. |
maxMultiple
|
max-multiple
|
number | undefined
|
Maximum number of options that can be selected when multiple is enabled. | |
name
|
name
|
string | undefined
|
The name of the select for form submission. | |
label
|
label
|
string
|
The label text for the select. | |
onChange
|
((event: CustomEvent) => void) | undefined
|
undefined
|
Callback function triggered when the selection changes. |
Item Structure (OptionData)
Structure of individual items in the items array
| Property | Type | Required | Description |
|---|---|---|---|
name
|
string
|
Yes | Display text shown to the user for this option. |
value
|
string
|
Yes | Unique value associated with this option that gets submitted when selected. |
Events
| Name | Description | Event Detail |
|---|---|---|
selection-changed
Deprecated
|
Emitted when the selected option(s) change. | { selected: string[] } |
nbhd-selection-changed
|
Emitted when the selected option(s) change. | { selected: string[] } |
change
Deprecated
|
Emitted when the selected option(s) change (native-style event, no detail). | {} |
nbhd-change
|
Emitted when the selected option(s) change (no detail). | {} |
Slots
| Name | Description |
|---|---|
label
|
Custom content for the select label. Defaults to the label property value. |
CSS Parts
Styleable parts exposed for CSS custom styling using ::part() selector
| Name | Description |
|---|---|
label
|
The |
label-slot
|
The |
label-text
|
The nbhd-text component that displays the default label text. |
field
|
The form-control-field div wrapper containing the select input area. |
select
|
The main select container div that handles focus and keyboard navigation. |
combobox
|
The display area showing current selection with dropdown arrow (visible when hidePlaceholder is false). |
listbox
|
The dropdown container that holds all selectable options (visible when open or multiple mode). |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-select-host-display
|
var(--nbhd-formControl-display-host, block) |
--nbhd-select-backgroundColor
|
var(--nbhd-color-white) |
--nbhd-select-borderRadius
|
3px |
--nbhd-select-borderStyle
|
solid |
--nbhd-select-borderWidth
|
1px |
--nbhd-select-borderColor
|
var(--nbhd-color-black) |
--nbhd-select-outlineColor-focus
|
var(--nbhd-focus-outlineColor) |
--nbhd-select-outlineOffset
|
0 |
--nbhd-select-outlineStyle
|
solid |
--nbhd-select-outlineWidth
|
var(--nbhd-space-025) |
--nbhd-select-color
|
var(--nbhd-color-black) |
--nbhd-selectOption-backgroundColor-originColor
|
var(--nbhd-color-black) |
--nbhd-selectOption-borderInlineStartWidth
|
4px |
--nbhd-selectOption-borderInlineStartStyle
|
solid |
--nbhd-selectOption-borderInlineStartColor
|
transparent |
--nbhd-selectOption-inlineSize
|
100% |
--nbhd-selectOption-paddingBlock
|
var(--nbhd-space-1) |
--nbhd-selectOption-paddingInline
|
var(--nbhd-space-2) |
--nbhd-selectOption-selected-color
|
var(--nbhd-color-blue) |