Select Settings
Preset list
My own list
Countries (ISO 3166-1)
US states
Months
Days of the week
Years (range)
Hours (00–23)
Minutes (00–55, step 5)
Currencies
Common time zones
Languages
Ratings 1–5
Number range
From
To
Options — one per line
-- Fruit apple: Apple banana: Banana cherry: Cherry -- Vegetables carrot: Carrot potato: Potato
Use
value: Label
to set both, or one word for both. Start a line with
--
to open an optgroup.
Value / label separator
Colon (value: Label)
Pipe (value|Label)
Comma (value,Label)
Equals (value=Label)
No separator — label only
name attribute
id attribute
Placeholder option
Rendered as a disabled, selected, empty-value option so the browser's required validation still fires.
Pre-selected value
Disabled values
Options
Include the <select> wrapper
Off gives bare <option> tags to paste into an existing select.
Include a <label>
Required for accessibility — a placeholder is not a label.
required
multiple
Sort alphabetically by label
Auto-generate values from labels
Lowercased and hyphenated.
Output format
HTML
JSX / React
Vue template
JSON array
JS array + render loop
Generated Markup
Code
Live preview
Accessibility
select.html
Copy
Download