W3cubDocs

Datalist element

Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.

Spec	https://html.spec.whatwg.org/multipage/forms.html#the-datalist-element
Status	WHATWG Living Standard

IE	Edge	Firefox	Chrome	Safari	Opera
		147 ⁽⁷⁾	144
		146 ⁽⁷⁾	143	TP
		145 ⁽⁷⁾	142	26.1
11 ⁽²⁾	141	144 ⁽⁷⁾	141	26.0	122
10 ⁽²⁾	140	143 ⁽⁷⁾	140	18.5-18.6	121
9	139	142 ⁽⁷⁾	139	18.4	120
8	138	141 ⁽⁷⁾	138	18.3	119
Show all
7	137	140 ⁽⁷⁾	137	18.2	118
6	136	139 ⁽⁷⁾	136	18.1	117
5.5	135	138 ⁽⁷⁾	135	18.0	116
	134	137 ⁽⁷⁾	134	17.6	115
	133	136 ⁽⁷⁾	133	17.5	114
	132	135 ⁽⁷⁾	132	17.4	113
	131	134 ⁽⁷⁾	131	17.3	112
	130	133 ⁽⁷⁾	130	17.2	111
	129	132 ⁽⁷⁾	129	17.1	110
	128	131 ⁽⁷⁾	128	17.0	109
	127	130 ⁽⁷⁾	127	16.6	108
	126	129 ⁽⁷⁾	126	16.5	107
	125	128 ⁽⁷⁾	125	16.4	106
	124	127 ⁽⁷⁾	124	16.3	105
	123	126 ⁽⁷⁾	123	16.2	104
	122	125 ⁽⁷⁾	122	16.1	103
	121	124 ⁽⁷⁾	121	16.0	102
	120	123 ⁽⁷⁾	120	15.6	101
	119	122 ⁽⁷⁾	119	15.5	100
	118	121 ⁽⁷⁾	118	15.4	99
	117	120 ⁽⁷⁾	117	15.2-15.3	98
	116	119 ⁽⁷⁾	116	15.1	97
	115	118 ⁽⁷⁾	115	15	96
	114	117 ⁽⁷⁾	114	14.1	95
	113	116 ⁽⁷⁾	113	14	94
	112	115 ⁽⁷⁾	112	13.1	93
	111	114 ⁽⁷⁾	111	13	92
	110	113 ⁽⁷⁾	110	12.1	91
	109	112 ⁽⁷⁾	109	12	90
	108	111 ⁽⁷⁾	108	11.1	89
	107	110 ⁽⁷⁾	107	11	88
	106	109 ⁽³⁾	106	10.1	87
	105	108 ⁽³⁾	105	10	86
	104	107 ⁽³⁾	104	9.1	85
	103	106 ⁽³⁾	103	9	84
	102	105 ⁽³⁾	102	8	83
	101	104 ⁽³⁾	101	7.1	82
	100	103 ⁽³⁾	100	7	81
	99	102 ⁽³⁾	99	6.1	80
	98	101 ^(3,6)	98	6	79
	97	100 ^(3,6)	97	5.1	78
	96	99 ^(3,6)	96	5	77
	95	98 ^(3,6)	95	4	76
	94	97 ^(3,6)	94	3.2	75
	93	96 ^(3,6)	93	3.1	74
	92	95 ^(3,6)	92		73
	91	94 ^(3,6)	91		72
	90	93 ^(3,6)	90		71
	89	92 ^(3,6)	89		70
	88	91 ^(3,6)	88		69
	87	90 ^(3,6)	87		68
	86	89 ^(3,6)	86		67
	85	88 ^(3,6)	85		66
	84	87 ^(3,6)	84		65
	83	86 ^(3,6)	83		64
	81	85 ^(3,6)	81		63 ⁽¹⁾
	80	84 ^(3,6)	80		62 ⁽¹⁾
	79	83 ^(3,6)	79		60 ⁽¹⁾
	18 ^(2,4)	82 ^(3,6)	78		58 ⁽¹⁾
	17 ^(2,4)	81 ^(3,6)	77		57 ⁽¹⁾
	16 ^(2,4)	80 ^(3,6)	76		56 ⁽¹⁾
	15 ⁽²⁾	79 ^(3,6)	75		55 ⁽¹⁾
	14 ⁽²⁾	78 ^(3,6)	74		54 ⁽¹⁾
	13 ⁽²⁾	77 ^(3,6)	73		53 ⁽¹⁾
	12 ⁽²⁾	76 ^(3,6)	72		52 ⁽¹⁾
		75 ^(3,6)	71		51 ⁽¹⁾
		74 ^(3,6)	70		50 ⁽¹⁾
		73 ^(3,6)	69		49 ⁽¹⁾
		72 ^(3,6)	68 ⁽¹⁾		48 ⁽¹⁾
		71 ^(3,6)	67 ⁽¹⁾		47 ⁽¹⁾
		70 ^(3,6)	66 ⁽¹⁾		46 ⁽¹⁾
		69 ^(3,6)	65 ⁽¹⁾		45 ⁽¹⁾
		68 ^(3,6)	64 ⁽¹⁾		44 ⁽¹⁾
		67 ^(3,6)	63 ⁽¹⁾		43 ⁽¹⁾
		66 ^(3,6)	62 ⁽¹⁾		42 ⁽¹⁾
		65 ^(3,6)	61 ⁽¹⁾		41 ⁽¹⁾
		64 ^(3,6)	60 ⁽¹⁾		40 ⁽¹⁾
		63 ^(3,6)	59 ⁽¹⁾		39 ⁽¹⁾
		62 ^(3,6)	58 ⁽¹⁾		38 ⁽¹⁾
		61 ^(3,6)	57 ⁽¹⁾		37 ⁽¹⁾
		60 ^(3,6)	56 ⁽¹⁾		36 ⁽¹⁾
		59 ^(3,6)	55 ⁽¹⁾		35 ⁽¹⁾
		58 ^(3,6)	54 ⁽¹⁾		34 ⁽¹⁾
		57 ^(3,6)	53 ⁽¹⁾		33 ⁽¹⁾
		56 ^(3,6)	52 ⁽¹⁾		32 ⁽¹⁾
		55 ^(3,6)	51 ⁽¹⁾		31 ⁽¹⁾
		54 ^(3,6)	50 ⁽¹⁾		30 ⁽¹⁾
		53 ^(3,6)	49 ⁽¹⁾		29 ⁽¹⁾
		52 ^(3,6)	48 ⁽¹⁾		28 ⁽¹⁾
		51 ^(3,6)	47 ⁽¹⁾		27 ⁽¹⁾
		50 ^(3,6)	46 ⁽¹⁾		26 ⁽¹⁾
		49 ^(3,6)	45 ⁽¹⁾		25 ⁽¹⁾
		48 ^(3,6)	44 ⁽¹⁾		24 ⁽¹⁾
		47 ^(3,6)	43 ⁽¹⁾		23 ⁽¹⁾
		46 ^(3,6)	42 ⁽¹⁾		22 ⁽¹⁾
		45 ^(3,6)	41 ⁽¹⁾		21 ⁽¹⁾
		44 ^(3,6)	40 ⁽¹⁾		20 ⁽¹⁾
		43 ^(3,6)	39 ⁽¹⁾		19 ⁽¹⁾
		42 ^(3,6)	38 ⁽¹⁾		18 ⁽¹⁾
		41 ^(3,6)	37 ⁽¹⁾		17 ⁽¹⁾
		40 ^(3,6)	36 ⁽¹⁾		16 ⁽¹⁾
		39 ^(3,6)	35 ⁽¹⁾		15 ⁽¹⁾
		38 ^(3,6)	34 ⁽¹⁾		12.1
		37 ^(3,6)	33 ⁽¹⁾		12
		36 ^(3,6)	32 ⁽¹⁾		11.6
		35 ^(3,6)	31 ⁽¹⁾		11.5
		34 ^(3,6)	30 ⁽¹⁾		11.1
		33 ^(3,6)	29 ⁽¹⁾		11
		32 ^(3,6)	28 ⁽¹⁾		10.6
		31 ^(3,6)	27 ⁽¹⁾		10.5
		30 ^(3,6)	26 ⁽¹⁾		10.0-10.1
		29 ^(3,6)	25 ⁽¹⁾		9.5-9.6
		28 ^(3,6)	24 ⁽¹⁾		9
		27 ^(3,6)	23 ⁽¹⁾
		26 ^(3,6)	22 ⁽¹⁾
		25 ^(3,6)	21 ⁽¹⁾
		24 ^(3,6)	20 ⁽¹⁾
		23 ^(3,6)	19
		22 ^(3,6)	18
		21 ^(3,6)	17
		20 ^(3,6)	16
		19 ^(3,6)	15
		18 ^(3,6)	14
		17 ^(3,6)	13
		16 ^(3,6)	12
		15 ^(3,6)	11
		14 ^(3,6)	10
		13 ^(3,6)	9
		12 ^(3,6)	8
		11 ^(3,6)	7
		10 ^(3,6)	6
		9 ^(3,6)	5
		8 ^(3,6)	4
		7 ^(3,6)
		6 ^(3,6)
		5 ^(3,6)
		4 ^(3,6)
		3.6
		3.5
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
26.1 ^(5,8)
26.0 ^(5,8)	all	141	10	80	141	143	11	15.5	28	14.9	13.52	3.0-3.1
18.5-18.6 ^(5,8)		4.4.3-4.4.4	7	12.1			10		27			2.5
18.4 ^(5,8)		4.4		12					26
18.3 ^(5,8)		4.2-4.3		11.5					25
Show all
18.2 ^(5,8)		4.1		11.1					24
18.1 ^(5,8)		4		11					23
18.0 ^(5,8)		3		10					22
17.6-17.7 ^(5,8)		2.3							21
17.5 ^(5,8)		2.2							20
17.4 ^(5,8)		2.1							19.0
17.3 ^(5,8)									18.0
17.2 ^(5,8)									17.0
17.1 ^(5,8)									16.0
17.0 ^(5,8)									15.0
16.6-16.7 ^(5,8)									14.0
16.5 ^(5,8)									13.0
16.4 ^(5,8)									12.0
16.3 ^(5,8)									11.1-11.2
16.2 ^(5,8)									10.1
16.1 ^(5,8)									9.2
16.0 ^(5,8)									8.2
15.6-15.8 ^(5,8)									7.2-7.4
15.5 ^(5,8)									6.2-6.4
15.4 ^(5,8)									5.0-5.4
15.2-15.3 ^(5,8)									4
15.0-15.1 ^(5,8)
14.5-14.8 ^(5,8)
14.0-14.4 ^(5,8)
13.4-13.7 ^(5,8)
13.3 ^(5,8)
13.2 ^(5,8)
13.0-13.1 ^(5,8)
12.2-12.5 ^(5,8)
12.0-12.1
11.3-11.4
11.0-11.2
10.3
10.0-10.2
9.3
9.0-9.2
8.1-8.4
8
7.0-7.1
6.0-6.1
5.0-5.1
4.2-4.3
4.0-4.1
3.2

Notes

While most commonly used on text fields, datalists can also be used on other input types. IE11 supports the element on range fields. Chrome and Opera also support datalists to suggest given values on range, color and date/time fields.

Partial support refers to a bug where long lists of items are unscrollable resulting in unselectable options.
Partial support in IE refers to significantly buggy behavior (IE11+ does send the input and change events upon selection).
Partial support refers to no support for datalists on non-text fields (e.g. number, range, color, date and time).
Partial support in Edge refers to disappearing option elements on focusing the input element via tab.
Supported through WKWebView and Safari but not through UIWebView
In Firefox, autocomplete must be set to off to make dynamic datalist work due to a bug
Partial support refers to no support for datalists on date and time fields.
If both a value and label are provided for an option iOS will only display the value as suggested selection. (see bug)

Bugs

In UIWebView Apps in iOS 12.2, using the datalist element may cause the input type to become incapable of being able to type in it despite not supporting it.
While all options are part of the source code, Chromium browsers can only show the first 512 options in the dropdown list.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/datalist