Select | Components | Neighborhood Design System

Example

Selected Brand

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>


<script>
  const nbhdSelect = document.querySelector('nbhd-select');

  nbhdSelect.items = [
    {
      name: 'option 1',
      value: '1',
    },
    {
      name: 'option 2',
      value: '2',
    },
    {
      name: 'option 3',
      value: '3',
    },
  ];
</script>

React

import { NbhdSelect } from '@fbin-web/neighborhood-react';

const items = [
  {
    name: 'option 1',
    value: '1',
  },
  {
    name: 'option 2',
    value: '2',
  },
  {
    name: 'option 3',
    value: '3',
  },
];

const App = () => (
  <>
    <NbhdSelect
      ariaLabel="Descriptive text about this input"
      label="Select form field label"
      items={items}></NbhdSelect>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`selectedValues`	`selected-values`	`string[]`	`[]`	Array of currently selected option values.
`items`		`SelectOptionContent[]`	`[]`	Array of options to display in the select. Each item should have name and value properties.
`surface`	`surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Sets the surface color treatment for the select.
`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.
`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.
`onNbhdChange`	`on-nbhd-change`	`((event: CustomEvent) => void) \| undefined`	`undefined`	Callback function triggered when the selected option(s) change.

Selection Option Content Structure

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
`nbhd-selection-changed`	Emitted when the selected option(s) change.	{ selected: string[] }
`nbhd-change`	Emitted when the selected option(s) change (no detail).

Slots

Name	Description
`label`	Custom content for the select label, rendered when the label property is set. Defaults to the label property value.

CSS Parts

Styleable parts exposed for CSS custom styling using ::part() selector

Name	Description
`label`	The element wrapper for the select label.
`label-slot`	The element inside the label for custom label content.
`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 the current selection with a dropdown arrow. Visible for single-select mode and for multiple-select mode when hidePlaceholder is false.
`listbox`	The dropdown container that holds all selectable options (visible when open or multiple mode).

Dependencies

This component contains the following components as dependencies.

Text

Select Ready