Components

Select

Offers a brutal custom dropdown with projected option content, active states, selected checks, and a native select directive for simple forms.

1Size
FORMNative
A11YBuilt-in
Source ↗Open Docs

Preview

Usage

Import
import { NbNativeSelect, NbSelect, NbSelectOption } from '@ng-brutalism/ui';
Template
<div class="w-80">
  <nb-select placeholder="Select an option">
    <nb-select-option value="worldwide" label="Worldwide">
      <docs-select-globe-icon />
      Worldwide
    </nb-select-option>
    <nb-select-option value="full-time" label="Full-time">
      <docs-select-briefcase-icon />
      Full-time
    </nb-select-option>
    <nb-select-option value="part-time" label="Part-time">
      <docs-select-clock-icon />
      Part-time
    </nb-select-option>
    <nb-select-option value="remote" label="Remote">
      <docs-select-building-icon />
      Remote
    </nb-select-option>
  </nb-select>
</div>
Click 'Show more' to view additional details.

With Label

With Prefix

Option Content

Disabled

Native Select

Customization

Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.

Token Default Used for
--nb-select-bg var(--nb-input-bg, var(--nb-field-bg)) Select background
--nb-select-fg var(--nb-foreground) Select text and icon color
--nb-select-border var(--nb-border) Select border and focus ring color
--nb-select-radius var(--nb-radius) Select corner radius
--nb-select-listbox-bg var(--nb-select-bg) Custom select listbox background
--nb-border #000000 Border color and focus ring color
--nb-shadow #000000 Offset shadow color
--nb-radius 0rem Corner radius through the rounded-nb utility
--nb-shadow-offset-x 4px Horizontal shadow and press offset
--nb-shadow-offset-y 4px Vertical shadow and press offset
--nb-foreground #000000 Default foreground text color
--nb-background #ffffff Default surface background color

API

<nb-select> (NbSelect)

Input Type Default Description
placeholder string 'Select an option' Text shown when no option is selected.
value ModelSignal<NbSelectValue | null> null Selected value for two-way binding.
disabled boolean false Disables the trigger and all options.
aria-label string | null null Accessible label for the trigger.
aria-labelledby string | null null ID reference for an external label.

select[nbSelect] (NbNativeSelect)

Directive applied to a native <select> element to give it the brutal look without the custom listbox behaviour. Detects when nested inside an <nb-input-group> and adjusts its border and shadow accordingly. Has no inputs.