Select

A <nana-select> element.

Preview

Kenya Uganda

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/select";

Basic usage

<nana-select label="Country" style="min-width:16rem">
  <nana-option value="ke">Kenya</nana-option>
  <nana-option value="ug">Uganda</nana-option>
</nana-select>

Searchable

Add searchable to filter options; clearable adds a reset button.

United States Canada Mexico

Show code Copy

Multi-select

Set multiple — selected values render as removable chips.

United States Canada Mexico

Show code Copy

API

Property	Type	Default	Description
label	string	''	—
value	string	''	—
name	string	''	—
placeholder	string	''	—
size	'xs' | 'sm' | 'md' | 'lg'	'md'	—
open	boolean	false	—
disabled	boolean	false	—
required	boolean	false	—
clearable	boolean	false	—
searchable	boolean	false	—
multiple	boolean	false	—
invalid	boolean	false	—
helperText	string	''	—
errorMessage	string	''	—
inputId	—	nana-select-${Math.random().toString(36).slice(2, 7)}	—

CSS Parts

Part	Description
trigger	The trigger element
panel	The floating listbox panel
chip	A selected-value chip (multi-select only)
search	The search input

Accessibility

• Keyboard accessible
• Screen-reader labels
• Focus-visible states
• ARIA roles and states
• WCAG 2.2 AA contrast

Related components

• Button
• Button Group
• Icon Button
• Input
• Textarea

Storybook

Explore Select interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook