Documentation
Foundations
Components
Accordion
Accordion (Deprecated)
ActionBar
Alert
Avatar
Badges
Block
BottomSheet
Buttons
Calendars
Carousel
Chip
Comment
Compass
Confirm
Dialog
Drawer
Dropdown
ElasticContainer
Error
Expand
Filter
FloatingContainer
Group
Hint
Icon
Inputs
Island
ItemGroup
ItemsWithMore
Label
Like
LineClamp
Link
Loader
Message
Mobile
Notification
Pager
PdfViewer
Pin
Preview
Progress
Pulse
Push
Rating
Scrollbar
Selects
ComboBox
MultiSelect
Select
Select [deprecated]
Sheet
SheetDialog
Sliders
Status
Surface
SwipeActions
Table
Tag
Textfield
ThumbnailCard
Tiles
Title
Toggles
Tree
Layout
Navigation
Charts
Customization
Tools
SelectLegacy
LEGACY
Examples
API
Setup
More
Source code
Select
is a field with dropdown to choose one item.
String array
#
Preview
HTML
TypeScript
More
Edit
If you need to set some attributes or listen to events on native
input
, you can put it inside with
Textfield
directive as shown below
Character
Character
Character
Copy
Copy
Copy
Custom template
#
Preview
HTML
TypeScript
LESS
More
Edit
6713
Bitcoin
*6713
Choose a card
[object Object]
6713
Bitcoin
*6713
[object Object]
RUB
₽24 876.55
[object Object]
Copy
Copy
Copy
Copy
Item delegate
#
Preview
HTML
TypeScript
LESS
More
Edit
What is your address?
Choose an address
Copy
Copy
Copy
Copy
DataList
#
Preview
HTML
TypeScript
LESS
More
Edit
de la Concordia «Gabo» GarcÃa Márquez
Select user
de la Concordia «Gabo» GarcÃa Márquez
Copy
Copy
Copy
Copy
ID only
#
Preview
HTML
TypeScript
LESS
More
Edit
John Cleese
42
Copy
Copy
Copy
Copy
DataListWrapper
#
Preview
HTML
TypeScript
LESS
More
Edit
Select user
Copy
Copy
Copy
Copy
Complex dropdown
#
Preview
HTML
TypeScript
LESS
More
Edit
All
Bank and account
Copy
Copy
Copy
Copy
Virtual scroll
#
You can use
Select
with
ScrollingModule
from
@angular/cdk/scrolling
.
Preview
HTML
TypeScript
LESS
More
Edit
Country
Copy
Copy
Copy
Copy
Accounts list
#
Preview
TypeScript
HTML
LESS
./account/index.ts
./account/index.less
./account/index.html
More
Edit
Dollar deposit
$237 000.00
[object Object]
Dollar deposit
$237 000.00
[object Object]
Copy
Copy
Copy
Copy
Copy
Copy
Copy
Options (stringify)
#
Preview
HTML
TypeScript
More
Edit
Employee
Copy
Copy
Copy
Native select
#
Preview
HTML
TypeScript
More
Edit
You can enable native select on mobile devices by putting
select
inside with
tuiSelect
directive as shown below
Character
Food
Character
Copy
Copy
Copy
Taiga UI
v4.34.0
More