Data input

Select

Themed dropdown select with a trigger button, listbox panel, and keyboard navigation.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjSelectComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

placeholder

options

multiple

disabled

<kj-select
  [(value)]="selected"
  placeholder="Choose a fruit"
>
  <kj-option [value]="'apple'">Apple</kj-option>
  <kj-option [value]="'banana'">Banana</kj-option>
  <kj-option [value]="'cherry'">Cherry</kj-option>
  <kj-option [value]="'date'">Date</kj-option>
</kj-select>