summaryrefslogtreecommitdiffstats
path: root/documentation/components/components-nativeselect.asciidoc
blob: 05259e4d28b8bf9908515fbdafc47f3230895877 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
---
title: NativeSelect
order: 18
layout: page
---

[[components.nativeselect]]
= NativeSelect

ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/drop-down-menu"]
endif::web[]

[classname]#NativeSelect# is a selection component allows selecting an item from a
drop-down list. It is implemented with the native selection input of web browsers, using the HTML [literal]#++<select>++# element.


[source, java]
----
// Create the selection component
NativeSelect<String> select =
    new NativeSelect<>("Native Selection");

// Add some items
select.setItems("Mercury", "Venus", ...);
----

[[figure.components.nativeselect.basic]]
.The [classname]#NativeSelect# Component
image::img/nativeselect-basic.png[width=20%, scaledwidth=35%]

Common selection component features are described in
<<components-selection#components.selection,"Selection Components">>.

== CSS Style Rules


[source, css]
----
.v-select {}
  .v-select-select {}
----

The component has a [literal]#++v-select++# overall style. The native
[literal]#++select++# element has [literal]#++v-select-select++# style.