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

Properties

Property	Attribute	Type	Default	Description
clearable	—	boolean	false
disabled	—	boolean	false
errorMessage	error-message	string	''
helperText	helper-text	string	''
inputId	—	—	`nana-select-${Math.random().toString(36).slice(2, 7)}`
invalid	—	boolean	false
label	—	string	''
multiple	—	boolean	false
name	—	string	''
open	—	boolean	false
placeholder	—	string	''
required	—	boolean	false
searchable	—	boolean	false
size	—	SelectSize	'md'
value	—	string	''

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