Select Native
Rust UI component that displays a dropdown menu that allows the user to select an option.
select
use leptos::prelude::*;
use crate::components::ui::select_native::{Label, SelectNative};
#[component]
pub fn DemoSelectNativeGroup() -> impl IntoView {
const TARGET_ID: &str = "TARGET_NATIVE_GROUP";
view! {
<div class="space-y-2 min-w-[300px]">
<Label r#for=TARGET_ID>"Select with option groups (native)"</Label>
<SelectNative id=TARGET_ID>
<optgroup label="Frontend">
<option value="1">React</option>
<option value="2">Vue</option>
<option value="3">Angular</option>
</optgroup>
<optgroup label="Backend">
<option value="4">Node.js</option>
<option value="5">Python</option>
<option value="6">Java</option>
</optgroup>
</SelectNative>
</div>
}
}
Examples
Timezone
use leptos::prelude::*;
use crate::components::ui::select_native::{OverlappingLabel, SelectNative};
#[component]
pub fn DemoSelectNativeTimezone() -> impl IntoView {
const TARGET_ID: &str = "TARGET_NATIVE_TIMEZONE";
view! {
<div class="group relative min-w-[300px]">
<OverlappingLabel r#for=TARGET_ID label="Select with native timezone" />
<SelectNative id=TARGET_ID>
<option value="Pacific/Midway">(GMT-11) Pacific/Midway</option>
<option value="Pacific/Niue">(GMT-11) Pacific/Niue</option>
<option value="Pacific/Pago_Pago">(GMT-11) Pacific/Pago Pago</option>
<option value="Pacific/Honolulu">(GMT-10) Pacific/Honolulu</option>
<option value="Pacific/Rarotonga">(GMT-10) Pacific/Rarotonga</option>
<option value="Pacific/Tahiti">(GMT-10) Pacific/Tahiti</option>
<option value="America/Adak">(GMT-9) America/Adak</option>
<option value="Pacific/Gambier">(GMT-9) Pacific/Gambier</option>
<option value="Pacific/Marquesas">(GMT-9:30) Pacific/Marquesas</option>
<option value="America/Anchorage">(GMT-8) America/Anchorage</option>
<option value="America/Juneau">(GMT-8) America/Juneau</option>
<option value="America/Metlakatla">(GMT-8) America/Metlakatla</option>
<option value="America/Nome">(GMT-8) America/Nome</option>
<option value="America/Sitka">(GMT-8) America/Sitka</option>
<option value="America/Yakutat">(GMT-8) America/Yakutat</option>
<option value="Pacific/Pitcairn">(GMT-8) Pacific/Pitcairn</option>
<option value="America/Creston">(GMT-7) America/Creston</option>
<option value="America/Dawson">(GMT-7) America/Dawson</option>
<option value="America/Dawson_Creek">(GMT-7) America/Dawson Creek</option>
<option value="America/Fort_Nelson">(GMT-7) America/Fort Nelson</option>
<option value="America/Hermosillo">(GMT-7) America/Hermosillo</option>
<option value="America/Los_Angeles">(GMT-7) America/Los Angeles</option>
<option value="America/Mazatlan">(GMT-7) America/Mazatlan</option>
<option value="America/Phoenix">(GMT-7) America/Phoenix</option>
<option value="America/Tijuana">(GMT-7) America/Tijuana</option>
<option value="America/Vancouver">(GMT-7) America/Vancouver</option>
<option value="America/Whitehorse">(GMT-7) America/Whitehorse</option>
<option value="America/Bahia_Banderas">(GMT-6) America/Bahia Banderas</option>
<option value="America/Belize">(GMT-6) America/Belize</option>
<option value="America/Boise">(GMT-6) America/Boise</option>
<option value="America/Cambridge_Bay">(GMT-6) America/Cambridge Bay</option>
<option value="America/Chihuahua">(GMT-6) America/Chihuahua</option>
<option value="America/Ciudad_Juarez">(GMT-6) America/Ciudad Juarez</option>
<option value="America/Costa_Rica">(GMT-6) America/Costa Rica</option>
<option value="America/Denver">(GMT-6) America/Denver</option>
<option value="America/Edmonton">(GMT-6) America/Edmonton</option>
<option value="America/El_Salvador">(GMT-6) America/El Salvador</option>
<option value="America/Guatemala">(GMT-6) America/Guatemala</option>
<option value="America/Inuvik">(GMT-6) America/Inuvik</option>
<option value="America/Managua">(GMT-6) America/Managua</option>
<option value="America/Merida">(GMT-6) America/Merida</option>
<option value="America/Mexico_City">(GMT-6) America/Mexico City</option>
<option value="America/Monterrey">(GMT-6) America/Monterrey</option>
<option value="America/Regina">(GMT-6) America/Regina</option>
<option value="America/Swift_Current">(GMT-6) America/Swift Current</option>
<option value="America/Tegucigalpa">(GMT-6) America/Tegucigalpa</option>
<option value="Pacific/Easter">(GMT-6) Pacific/Easter</option>
<option value="Pacific/Galapagos">(GMT-6) Pacific/Galapagos</option>
<option value="America/Bogota">(GMT-5) America/Bogota</option>
<option value="America/Cancun">(GMT-5) America/Cancun</option>
<option value="America/Cayman">(GMT-5) America/Cayman</option>
<option value="America/Chicago">(GMT-5) America/Chicago</option>
<option value="America/Coral_Harbour">(GMT-5) America/Coral Harbour</option>
<option value="America/Eirunepe">(GMT-5) America/Eirunepe</option>
<option value="America/Guayaquil">(GMT-5) America/Guayaquil</option>
<option value="America/Indiana/Knox">(GMT-5) America/Indiana/Knox</option>
<option value="America/Indiana/Tell_City">(GMT-5) America/Indiana/Tell City</option>
<option value="America/Jamaica">(GMT-5) America/Jamaica</option>
<option value="America/Lima">(GMT-5) America/Lima</option>
<option value="America/Matamoros">(GMT-5) America/Matamoros</option>
<option value="America/Menominee">(GMT-5) America/Menominee</option>
<option value="America/North_Dakota/Beulah">
(GMT-5) America/North Dakota/Beulah
</option>
<option value="America/North_Dakota/Center">
(GMT-5) America/North Dakota/Center
</option>
<option value="America/North_Dakota/New_Salem">
(GMT-5) America/North Dakota/New Salem
</option>
<option value="America/Ojinaga">(GMT-5) America/Ojinaga</option>
<option value="America/Panama">(GMT-5) America/Panama</option>
<option value="America/Rankin_Inlet">(GMT-5) America/Rankin Inlet</option>
<option value="America/Resolute">(GMT-5) America/Resolute</option>
<option value="America/Rio_Branco">(GMT-5) America/Rio Branco</option>
<option value="America/Winnipeg">(GMT-5) America/Winnipeg</option>
<option value="America/Anguilla">(GMT-4) America/Anguilla</option>
<option value="America/Antigua">(GMT-4) America/Antigua</option>
<option value="America/Aruba">(GMT-4) America/Aruba</option>
<option value="America/Barbados">(GMT-4) America/Barbados</option>
<option value="America/Blanc-Sablon">(GMT-4) America/Blanc-Sablon</option>
<option value="America/Boa_Vista">(GMT-4) America/Boa Vista</option>
<option value="America/Campo_Grande">(GMT-4) America/Campo Grande</option>
<option value="America/Caracas">(GMT-4) America/Caracas</option>
<option value="America/Cuiaba">(GMT-4) America/Cuiaba</option>
<option value="America/Curacao">(GMT-4) America/Curacao</option>
<option value="America/Detroit">(GMT-4) America/Detroit</option>
<option value="America/Dominica">(GMT-4) America/Dominica</option>
<option value="America/Grand_Turk">(GMT-4) America/Grand Turk</option>
<option value="America/Grenada">(GMT-4) America/Grenada</option>
<option value="America/Guadeloupe">(GMT-4) America/Guadeloupe</option>
<option value="America/Guyana">(GMT-4) America/Guyana</option>
<option value="America/Havana">(GMT-4) America/Havana</option>
<option value="America/Indiana/Marengo">(GMT-4) America/Indiana/Marengo</option>
<option value="America/Indiana/Petersburg">
(GMT-4) America/Indiana/Petersburg
</option>
<option value="America/Indiana/Vevay">(GMT-4) America/Indiana/Vevay</option>
<option value="America/Indiana/Vincennes">(GMT-4) America/Indiana/Vincennes</option>
<option value="America/Indiana/Winamac">(GMT-4) America/Indiana/Winamac</option>
<option value="America/Indianapolis">(GMT-4) America/Indianapolis</option>
<option value="America/Iqaluit">(GMT-4) America/Iqaluit</option>
<option value="America/Kentucky/Monticello">
(GMT-4) America/Kentucky/Monticello
</option>
<option value="America/Kralendijk">(GMT-4) America/Kralendijk</option>
<option value="America/La_Paz">(GMT-4) America/La Paz</option>
<option value="America/Louisville">(GMT-4) America/Louisville</option>
<option value="America/Lower_Princes">(GMT-4) America/Lower Princes</option>
<option value="America/Manaus">(GMT-4) America/Manaus</option>
<option value="America/Marigot">(GMT-4) America/Marigot</option>
<option value="America/Martinique">(GMT-4) America/Martinique</option>
<option value="America/Montserrat">(GMT-4) America/Montserrat</option>
<option value="America/Nassau">(GMT-4) America/Nassau</option>
<option value="America/New_York">(GMT-4) America/New York</option>
<option value="America/Port-au-Prince">(GMT-4) America/Port-au-Prince</option>
<option value="America/Port_of_Spain">(GMT-4) America/Port of Spain</option>
<option value="America/Porto_Velho">(GMT-4) America/Porto Velho</option>
<option value="America/Puerto_Rico">(GMT-4) America/Puerto Rico</option>
<option value="America/Santiago">(GMT-4) America/Santiago</option>
<option value="America/Santo_Domingo">(GMT-4) America/Santo Domingo</option>
<option value="America/St_Barthelemy">(GMT-4) America/St Barthelemy</option>
<option value="America/St_Kitts">(GMT-4) America/St Kitts</option>
<option value="America/St_Lucia">(GMT-4) America/St Lucia</option>
<option value="America/St_Thomas">(GMT-4) America/St Thomas</option>
<option value="America/St_Vincent">(GMT-4) America/St Vincent</option>
<option value="America/Toronto">(GMT-4) America/Toronto</option>
<option value="America/Tortola">(GMT-4) America/Tortola</option>
<option value="America/Araguaina">(GMT-3) America/Araguaina</option>
<option value="America/Argentina/La_Rioja">
(GMT-3) America/Argentina/La Rioja
</option>
<option value="America/Argentina/Rio_Gallegos">
(GMT-3) America/Argentina/Rio Gallegos
</option>
<option value="America/Argentina/Salta">(GMT-3) America/Argentina/Salta</option>
<option value="America/Argentina/San_Juan">
(GMT-3) America/Argentina/San Juan
</option>
<option value="America/Argentina/San_Luis">
(GMT-3) America/Argentina/San Luis
</option>
<option value="America/Argentina/Tucuman">(GMT-3) America/Argentina/Tucuman</option>
<option value="America/Argentina/Ushuaia">(GMT-3) America/Argentina/Ushuaia</option>
<option value="America/Asuncion">(GMT-3) America/Asuncion</option>
<option value="America/Bahia">(GMT-3) America/Bahia</option>
<option value="America/Belem">(GMT-3) America/Belem</option>
<option value="America/Buenos_Aires">(GMT-3) America/Buenos Aires</option>
<option value="America/Catamarca">(GMT-3) America/Catamarca</option>
<option value="America/Cayenne">(GMT-3) America/Cayenne</option>
<option value="America/Cordoba">(GMT-3) America/Cordoba</option>
<option value="America/Fortaleza">(GMT-3) America/Fortaleza</option>
<option value="America/Glace_Bay">(GMT-3) America/Glace Bay</option>
<option value="America/Goose_Bay">(GMT-3) America/Goose Bay</option>
<option value="America/Halifax">(GMT-3) America/Halifax</option>
<option value="America/Jujuy">(GMT-3) America/Jujuy</option>
<option value="America/Maceio">(GMT-3) America/Maceio</option>
<option value="America/Mendoza">(GMT-3) America/Mendoza</option>
<option value="America/Moncton">(GMT-3) America/Moncton</option>
<option value="America/Montevideo">(GMT-3) America/Montevideo</option>
<option value="America/Paramaribo">(GMT-3) America/Paramaribo</option>
<option value="America/Punta_Arenas">(GMT-3) America/Punta Arenas</option>
<option value="America/Recife">(GMT-3) America/Recife</option>
<option value="America/Santarem">(GMT-3) America/Santarem</option>
<option value="America/Sao_Paulo">(GMT-3) America/Sao Paulo</option>
<option value="America/Thule">(GMT-3) America/Thule</option>
<option value="Antarctica/Palmer">(GMT-3) Antarctica/Palmer</option>
<option value="Antarctica/Rothera">(GMT-3) Antarctica/Rothera</option>
<option value="Atlantic/Bermuda">(GMT-3) Atlantic/Bermuda</option>
<option value="Atlantic/Stanley">(GMT-3) Atlantic/Stanley</option>
<option value="America/Miquelon">(GMT-2) America/Miquelon</option>
<option value="America/Noronha">(GMT-2) America/Noronha</option>
<option value="America/St_Johns">(GMT-2:30) America/St Johns</option>
<option value="Atlantic/South_Georgia">(GMT-2) Atlantic/South Georgia</option>
<option value="America/Godthab">(GMT-1) America/Godthab</option>
<option value="America/Scoresbysund">(GMT-1) America/Scoresbysund</option>
<option value="Atlantic/Cape_Verde">(GMT-1) Atlantic/Cape Verde</option>
<option value="Africa/Abidjan">(GMT+0) Africa/Abidjan</option>
<option value="Africa/Accra">(GMT+0) Africa/Accra</option>
<option value="Africa/Bamako">(GMT+0) Africa/Bamako</option>
<option value="Africa/Banjul">(GMT+0) Africa/Banjul</option>
<option value="Africa/Bissau">(GMT+0) Africa/Bissau</option>
<option value="Africa/Conakry">(GMT+0) Africa/Conakry</option>
<option value="Africa/Dakar">(GMT+0) Africa/Dakar</option>
<option value="Africa/Freetown">(GMT+0) Africa/Freetown</option>
<option value="Africa/Lome">(GMT+0) Africa/Lome</option>
<option value="Africa/Monrovia">(GMT+0) Africa/Monrovia</option>
<option value="Africa/Nouakchott">(GMT+0) Africa/Nouakchott</option>
<option value="Africa/Ouagadougou">(GMT+0) Africa/Ouagadougou</option>
<option value="Africa/Sao_Tome">(GMT+0) Africa/Sao Tome</option>
<option value="America/Danmarkshavn">(GMT+0) America/Danmarkshavn</option>
<option value="Atlantic/Azores">(GMT+0) Atlantic/Azores</option>
<option value="Atlantic/Reykjavik">(GMT+0) Atlantic/Reykjavik</option>
<option value="Atlantic/St_Helena">(GMT+0) Atlantic/St Helena</option>
<option value="Africa/Algiers">(GMT+1) Africa/Algiers</option>
<option value="Africa/Bangui">(GMT+1) Africa/Bangui</option>
<option value="Africa/Brazzaville">(GMT+1) Africa/Brazzaville</option>
<option value="Africa/Casablanca">(GMT+1) Africa/Casablanca</option>
<option value="Africa/Douala">(GMT+1) Africa/Douala</option>
<option value="Africa/El_Aaiun">(GMT+1) Africa/El Aaiun</option>
<option value="Africa/Kinshasa">(GMT+1) Africa/Kinshasa</option>
<option value="Africa/Lagos">(GMT+1) Africa/Lagos</option>
<option value="Africa/Libreville">(GMT+1) Africa/Libreville</option>
<option value="Africa/Luanda">(GMT+1) Africa/Luanda</option>
<option value="Africa/Malabo">(GMT+1) Africa/Malabo</option>
<option value="Africa/Ndjamena">(GMT+1) Africa/Ndjamena</option>
<option value="Africa/Niamey">(GMT+1) Africa/Niamey</option>
<option value="Africa/Porto-Novo">(GMT+1) Africa/Porto-Novo</option>
<option value="Africa/Tunis">(GMT+1) Africa/Tunis</option>
<option value="Atlantic/Canary">(GMT+1) Atlantic/Canary</option>
<option value="Atlantic/Faeroe">(GMT+1) Atlantic/Faeroe</option>
<option value="Atlantic/Madeira">(GMT+1) Atlantic/Madeira</option>
<option value="Europe/Dublin">(GMT+1) Europe/Dublin</option>
<option value="Europe/Guernsey">(GMT+1) Europe/Guernsey</option>
<option value="Europe/Isle_of_Man">(GMT+1) Europe/Isle of Man</option>
<option value="Europe/Jersey">(GMT+1) Europe/Jersey</option>
<option value="Europe/Lisbon">(GMT+1) Europe/Lisbon</option>
<option value="Europe/London" selected="">
(GMT+1) Europe/London
</option>
<option value="Africa/Blantyre">(GMT+2) Africa/Blantyre</option>
<option value="Africa/Bujumbura">(GMT+2) Africa/Bujumbura</option>
<option value="Africa/Ceuta">(GMT+2) Africa/Ceuta</option>
<option value="Africa/Gaborone">(GMT+2) Africa/Gaborone</option>
<option value="Africa/Harare">(GMT+2) Africa/Harare</option>
<option value="Africa/Johannesburg">(GMT+2) Africa/Johannesburg</option>
<option value="Africa/Juba">(GMT+2) Africa/Juba</option>
<option value="Africa/Khartoum">(GMT+2) Africa/Khartoum</option>
<option value="Africa/Kigali">(GMT+2) Africa/Kigali</option>
<option value="Africa/Lubumbashi">(GMT+2) Africa/Lubumbashi</option>
<option value="Africa/Lusaka">(GMT+2) Africa/Lusaka</option>
<option value="Africa/Maputo">(GMT+2) Africa/Maputo</option>
<option value="Africa/Maseru">(GMT+2) Africa/Maseru</option>
<option value="Africa/Mbabane">(GMT+2) Africa/Mbabane</option>
<option value="Africa/Tripoli">(GMT+2) Africa/Tripoli</option>
<option value="Africa/Windhoek">(GMT+2) Africa/Windhoek</option>
<option value="Antarctica/Troll">(GMT+2) Antarctica/Troll</option>
<option value="Arctic/Longyearbyen">(GMT+2) Arctic/Longyearbyen</option>
<option value="Europe/Amsterdam">(GMT+2) Europe/Amsterdam</option>
<option value="Europe/Andorra">(GMT+2) Europe/Andorra</option>
<option value="Europe/Belgrade">(GMT+2) Europe/Belgrade</option>
<option value="Europe/Berlin">(GMT+2) Europe/Berlin</option>
<option value="Europe/Bratislava">(GMT+2) Europe/Bratislava</option>
<option value="Europe/Brussels">(GMT+2) Europe/Brussels</option>
<option value="Europe/Budapest">(GMT+2) Europe/Budapest</option>
<option value="Europe/Busingen">(GMT+2) Europe/Busingen</option>
<option value="Europe/Copenhagen">(GMT+2) Europe/Copenhagen</option>
<option value="Europe/Gibraltar">(GMT+2) Europe/Gibraltar</option>
<option value="Europe/Kaliningrad">(GMT+2) Europe/Kaliningrad</option>
<option value="Europe/Ljubljana">(GMT+2) Europe/Ljubljana</option>
<option value="Europe/Luxembourg">(GMT+2) Europe/Luxembourg</option>
<option value="Europe/Madrid">(GMT+2) Europe/Madrid</option>
<option value="Europe/Malta">(GMT+2) Europe/Malta</option>
<option value="Europe/Monaco">(GMT+2) Europe/Monaco</option>
<option value="Europe/Oslo">(GMT+2) Europe/Oslo</option>
<option value="Europe/Paris">(GMT+2) Europe/Paris</option>
<option value="Europe/Podgorica">(GMT+2) Europe/Podgorica</option>
<option value="Europe/Prague">(GMT+2) Europe/Prague</option>
<option value="Europe/Rome">(GMT+2) Europe/Rome</option>
<option value="Europe/San_Marino">(GMT+2) Europe/San Marino</option>
<option value="Europe/Sarajevo">(GMT+2) Europe/Sarajevo</option>
<option value="Europe/Skopje">(GMT+2) Europe/Skopje</option>
<option value="Europe/Stockholm">(GMT+2) Europe/Stockholm</option>
<option value="Europe/Tirane">(GMT+2) Europe/Tirane</option>
<option value="Europe/Vaduz">(GMT+2) Europe/Vaduz</option>
<option value="Europe/Vatican">(GMT+2) Europe/Vatican</option>
<option value="Europe/Vienna">(GMT+2) Europe/Vienna</option>
<option value="Europe/Warsaw">(GMT+2) Europe/Warsaw</option>
<option value="Europe/Zagreb">(GMT+2) Europe/Zagreb</option>
<option value="Europe/Zurich">(GMT+2) Europe/Zurich</option>
<option value="Africa/Addis_Ababa">(GMT+3) Africa/Addis Ababa</option>
<option value="Africa/Asmera">(GMT+3) Africa/Asmera</option>
<option value="Africa/Cairo">(GMT+3) Africa/Cairo</option>
<option value="Africa/Dar_es_Salaam">(GMT+3) Africa/Dar es Salaam</option>
<option value="Africa/Djibouti">(GMT+3) Africa/Djibouti</option>
<option value="Africa/Kampala">(GMT+3) Africa/Kampala</option>
<option value="Africa/Mogadishu">(GMT+3) Africa/Mogadishu</option>
<option value="Africa/Nairobi">(GMT+3) Africa/Nairobi</option>
<option value="Antarctica/Syowa">(GMT+3) Antarctica/Syowa</option>
<option value="Asia/Aden">(GMT+3) Asia/Aden</option>
<option value="Asia/Amman">(GMT+3) Asia/Amman</option>
<option value="Asia/Baghdad">(GMT+3) Asia/Baghdad</option>
<option value="Asia/Bahrain">(GMT+3) Asia/Bahrain</option>
<option value="Asia/Beirut">(GMT+3) Asia/Beirut</option>
<option value="Asia/Damascus">(GMT+3) Asia/Damascus</option>
<option value="Asia/Famagusta">(GMT+3) Asia/Famagusta</option>
<option value="Asia/Gaza">(GMT+3) Asia/Gaza</option>
<option value="Asia/Hebron">(GMT+3) Asia/Hebron</option>
<option value="Asia/Jerusalem">(GMT+3) Asia/Jerusalem</option>
<option value="Asia/Kuwait">(GMT+3) Asia/Kuwait</option>
<option value="Asia/Nicosia">(GMT+3) Asia/Nicosia</option>
<option value="Asia/Qatar">(GMT+3) Asia/Qatar</option>
<option value="Asia/Riyadh">(GMT+3) Asia/Riyadh</option>
<option value="Asia/Tehran">(GMT+3:30) Asia/Tehran</option>
<option value="Europe/Athens">(GMT+3) Europe/Athens</option>
<option value="Europe/Bucharest">(GMT+3) Europe/Bucharest</option>
<option value="Europe/Chisinau">(GMT+3) Europe/Chisinau</option>
<option value="Europe/Helsinki">(GMT+3) Europe/Helsinki</option>
<option value="Europe/Istanbul">(GMT+3) Europe/Istanbul</option>
<option value="Europe/Kiev">(GMT+3) Europe/Kiev</option>
<option value="Europe/Kirov">(GMT+3) Europe/Kirov</option>
<option value="Europe/Mariehamn">(GMT+3) Europe/Mariehamn</option>
<option value="Europe/Minsk">(GMT+3) Europe/Minsk</option>
<option value="Europe/Moscow">(GMT+3) Europe/Moscow</option>
<option value="Europe/Riga">(GMT+3) Europe/Riga</option>
<option value="Europe/Simferopol">(GMT+3) Europe/Simferopol</option>
<option value="Europe/Sofia">(GMT+3) Europe/Sofia</option>
<option value="Europe/Tallinn">(GMT+3) Europe/Tallinn</option>
<option value="Europe/Vilnius">(GMT+3) Europe/Vilnius</option>
<option value="Europe/Volgograd">(GMT+3) Europe/Volgograd</option>
<option value="Indian/Antananarivo">(GMT+3) Indian/Antananarivo</option>
<option value="Indian/Comoro">(GMT+3) Indian/Comoro</option>
<option value="Indian/Mayotte">(GMT+3) Indian/Mayotte</option>
<option value="Asia/Baku">(GMT+4) Asia/Baku</option>
<option value="Asia/Dubai">(GMT+4) Asia/Dubai</option>
<option value="Asia/Kabul">(GMT+4:30) Asia/Kabul</option>
<option value="Asia/Muscat">(GMT+4) Asia/Muscat</option>
<option value="Asia/Tbilisi">(GMT+4) Asia/Tbilisi</option>
<option value="Asia/Yerevan">(GMT+4) Asia/Yerevan</option>
<option value="Europe/Astrakhan">(GMT+4) Europe/Astrakhan</option>
<option value="Europe/Samara">(GMT+4) Europe/Samara</option>
<option value="Europe/Saratov">(GMT+4) Europe/Saratov</option>
<option value="Europe/Ulyanovsk">(GMT+4) Europe/Ulyanovsk</option>
<option value="Indian/Mahe">(GMT+4) Indian/Mahe</option>
<option value="Indian/Mauritius">(GMT+4) Indian/Mauritius</option>
<option value="Indian/Reunion">(GMT+4) Indian/Reunion</option>
<option value="Antarctica/Mawson">(GMT+5) Antarctica/Mawson</option>
<option value="Antarctica/Vostok">(GMT+5) Antarctica/Vostok</option>
<option value="Asia/Almaty">(GMT+5) Asia/Almaty</option>
<option value="Asia/Aqtau">(GMT+5) Asia/Aqtau</option>
<option value="Asia/Aqtobe">(GMT+5) Asia/Aqtobe</option>
<option value="Asia/Ashgabat">(GMT+5) Asia/Ashgabat</option>
<option value="Asia/Atyrau">(GMT+5) Asia/Atyrau</option>
<option value="Asia/Calcutta">(GMT+5:30) Asia/Calcutta</option>
<option value="Asia/Colombo">(GMT+5:30) Asia/Colombo</option>
<option value="Asia/Dushanbe">(GMT+5) Asia/Dushanbe</option>
<option value="Asia/Karachi">(GMT+5) Asia/Karachi</option>
<option value="Asia/Katmandu">(GMT+5:45) Asia/Katmandu</option>
<option value="Asia/Oral">(GMT+5) Asia/Oral</option>
<option value="Asia/Qostanay">(GMT+5) Asia/Qostanay</option>
<option value="Asia/Qyzylorda">(GMT+5) Asia/Qyzylorda</option>
<option value="Asia/Samarkand">(GMT+5) Asia/Samarkand</option>
<option value="Asia/Tashkent">(GMT+5) Asia/Tashkent</option>
<option value="Asia/Yekaterinburg">(GMT+5) Asia/Yekaterinburg</option>
<option value="Indian/Kerguelen">(GMT+5) Indian/Kerguelen</option>
<option value="Indian/Maldives">(GMT+5) Indian/Maldives</option>
<option value="Asia/Bishkek">(GMT+6) Asia/Bishkek</option>
<option value="Asia/Dhaka">(GMT+6) Asia/Dhaka</option>
<option value="Asia/Omsk">(GMT+6) Asia/Omsk</option>
<option value="Asia/Rangoon">(GMT+6:30) Asia/Rangoon</option>
<option value="Asia/Thimphu">(GMT+6) Asia/Thimphu</option>
<option value="Asia/Urumqi">(GMT+6) Asia/Urumqi</option>
<option value="Indian/Chagos">(GMT+6) Indian/Chagos</option>
<option value="Indian/Cocos">(GMT+6:30) Indian/Cocos</option>
<option value="Antarctica/Davis">(GMT+7) Antarctica/Davis</option>
<option value="Asia/Bangkok">(GMT+7) Asia/Bangkok</option>
<option value="Asia/Barnaul">(GMT+7) Asia/Barnaul</option>
<option value="Asia/Hovd">(GMT+7) Asia/Hovd</option>
<option value="Asia/Jakarta">(GMT+7) Asia/Jakarta</option>
<option value="Asia/Krasnoyarsk">(GMT+7) Asia/Krasnoyarsk</option>
<option value="Asia/Novokuznetsk">(GMT+7) Asia/Novokuznetsk</option>
<option value="Asia/Novosibirsk">(GMT+7) Asia/Novosibirsk</option>
<option value="Asia/Phnom_Penh">(GMT+7) Asia/Phnom Penh</option>
<option value="Asia/Pontianak">(GMT+7) Asia/Pontianak</option>
<option value="Asia/Saigon">(GMT+7) Asia/Saigon</option>
<option value="Asia/Tomsk">(GMT+7) Asia/Tomsk</option>
<option value="Asia/Vientiane">(GMT+7) Asia/Vientiane</option>
<option value="Indian/Christmas">(GMT+7) Indian/Christmas</option>
<option value="Antarctica/Casey">(GMT+8) Antarctica/Casey</option>
<option value="Asia/Brunei">(GMT+8) Asia/Brunei</option>
<option value="Asia/Hong_Kong">(GMT+8) Asia/Hong Kong</option>
<option value="Asia/Irkutsk">(GMT+8) Asia/Irkutsk</option>
<option value="Asia/Kuala_Lumpur">(GMT+8) Asia/Kuala Lumpur</option>
<option value="Asia/Kuching">(GMT+8) Asia/Kuching</option>
<option value="Asia/Macau">(GMT+8) Asia/Macau</option>
<option value="Asia/Makassar">(GMT+8) Asia/Makassar</option>
<option value="Asia/Manila">(GMT+8) Asia/Manila</option>
<option value="Asia/Shanghai">(GMT+8) Asia/Shanghai</option>
<option value="Asia/Singapore">(GMT+8) Asia/Singapore</option>
<option value="Asia/Taipei">(GMT+8) Asia/Taipei</option>
<option value="Asia/Ulaanbaatar">(GMT+8) Asia/Ulaanbaatar</option>
<option value="Australia/Eucla">(GMT+8:45) Australia/Eucla</option>
<option value="Australia/Perth">(GMT+8) Australia/Perth</option>
<option value="Asia/Chita">(GMT+9) Asia/Chita</option>
<option value="Asia/Dili">(GMT+9) Asia/Dili</option>
<option value="Asia/Jayapura">(GMT+9) Asia/Jayapura</option>
<option value="Asia/Khandyga">(GMT+9) Asia/Khandyga</option>
<option value="Asia/Pyongyang">(GMT+9) Asia/Pyongyang</option>
<option value="Asia/Seoul">(GMT+9) Asia/Seoul</option>
<option value="Asia/Tokyo">(GMT+9) Asia/Tokyo</option>
<option value="Asia/Yakutsk">(GMT+9) Asia/Yakutsk</option>
<option value="Australia/Adelaide">(GMT+9:30) Australia/Adelaide</option>
<option value="Australia/Broken_Hill">(GMT+9:30) Australia/Broken Hill</option>
<option value="Australia/Darwin">(GMT+9:30) Australia/Darwin</option>
<option value="Pacific/Palau">(GMT+9) Pacific/Palau</option>
<option value="Antarctica/DumontDUrville">
(GMT+10) Antarctica/DumontDUrville
</option>
<option value="Antarctica/Macquarie">(GMT+10) Antarctica/Macquarie</option>
<option value="Asia/Ust-Nera">(GMT+10) Asia/Ust-Nera</option>
<option value="Asia/Vladivostok">(GMT+10) Asia/Vladivostok</option>
<option value="Australia/Brisbane">(GMT+10) Australia/Brisbane</option>
<option value="Australia/Hobart">(GMT+10) Australia/Hobart</option>
<option value="Australia/Lindeman">(GMT+10) Australia/Lindeman</option>
<option value="Australia/Lord_Howe">(GMT+10:30) Australia/Lord Howe</option>
<option value="Australia/Melbourne">(GMT+10) Australia/Melbourne</option>
<option value="Australia/Sydney">(GMT+10) Australia/Sydney</option>
<option value="Pacific/Guam">(GMT+10) Pacific/Guam</option>
<option value="Pacific/Port_Moresby">(GMT+10) Pacific/Port Moresby</option>
<option value="Pacific/Saipan">(GMT+10) Pacific/Saipan</option>
<option value="Pacific/Truk">(GMT+10) Pacific/Truk</option>
// <option value="Asia/Magadan">(GMT+11) Asia/Magadan</option>
// <option value="Asia/Sakhalin">(GMT+11) Asia/Sakhalin</option>
// <option value="Asia/Srednekolymsk">(GMT+11) Asia/Srednekolymsk</option>
// <option value="Pacific/Bougainville">(GMT+11) Pacific/Bougainville</option>
// <option value="Pacific/Efate">(GMT+11) Pacific/Efate</option>
// <option value="Pacific/Guadalcanal">(GMT+11) Pacific/Guadalcanal</option>
// <option value="Pacific/Kosrae">(GMT+11) Pacific/Kosrae</option>
// <option value="Pacific/Norfolk">(GMT+11) Pacific/Norfolk</option>
// <option value="Pacific/Noumea">(GMT+11) Pacific/Noumea</option>
// <option value="Pacific/Ponape">(GMT+11) Pacific/Ponape</option>
// <option value="Antarctica/McMurdo">(GMT+12) Antarctica/McMurdo</option>
// <option value="Asia/Anadyr">(GMT+12) Asia/Anadyr</option>
// <option value="Asia/Kamchatka">(GMT+12) Asia/Kamchatka</option>
// <option value="Pacific/Auckland">(GMT+12) Pacific/Auckland</option>
// <option value="Pacific/Chatham">(GMT+12:45) Pacific/Chatham</option>
// <option value="Pacific/Fiji">(GMT+12) Pacific/Fiji</option>
// <option value="Pacific/Funafuti">(GMT+12) Pacific/Funafuti</option>
// <option value="Pacific/Kwajalein">(GMT+12) Pacific/Kwajalein</option>
// <option value="Pacific/Majuro">(GMT+12) Pacific/Majuro</option>
// <option value="Pacific/Nauru">(GMT+12) Pacific/Nauru</option>
// <option value="Pacific/Tarawa">(GMT+12) Pacific/Tarawa</option>
// <option value="Pacific/Wake">(GMT+12) Pacific/Wake</option>
// <option value="Pacific/Wallis">(GMT+12) Pacific/Wallis</option>
// <option value="Pacific/Apia">(GMT+13) Pacific/Apia</option>
// <option value="Pacific/Enderbury">(GMT+13) Pacific/Enderbury</option>
// <option value="Pacific/Fakaofo">(GMT+13) Pacific/Fakaofo</option>
// <option value="Pacific/Tongatapu">(GMT+13) Pacific/Tongatapu</option>
// <option value="Pacific/Kiritimati">(GMT+14) Pacific/Kiritimati</option>
</SelectNative>
</div>
}
}
Overlapping Label
use leptos::prelude::*;
use crate::components::ui::select_native::{OverlappingLabel, SelectNative};
#[component]
pub fn DemoSelectNativeOverlappingLabel() -> impl IntoView {
const TARGET_ID: &str = "TARGET_NATIVE_OVERLAPPING_LABEL";
view! {
<div class="group relative min-w-[300px]">
<OverlappingLabel r#for=TARGET_ID label="Select with overlapping label (native)" />
<SelectNative id=TARGET_ID>
<option value="" disabled selected>
Select framework
</option>
<option value="1">React</option>
<option value="2">Next.js</option>
<option value="3">Astro</option>
<option value="4">Gatsby</option>
</SelectNative>
</div>
}
}
Error
Selected option is invalid
use leptos::prelude::*;
use crate::components::ui::select_native::{Label, SelectNative};
#[component]
pub fn DemoSelectNativeError() -> impl IntoView {
const TARGET_ID: &str = "TARGET_NATIVE_ERROR";
view! {
<div class="space-y-2 [&>_svg]:text-destructive/80 min-w-[300px]">
<Label r#for=TARGET_ID>"Select with error (native)"</Label>
<div class="border-destructive/80 text-destructive [&_select]:border-destructive/80 [&_select]:text-destructive [&_select:focus-visible]:border-destructive/80 [&_select:focus-visible]:ring-destructive/20">
<SelectNative id=TARGET_ID>
<option value="1">React</option>
<option value="2">Next.js</option>
<option value="3">Astro</option>
<option value="4">Gatsby</option>
</SelectNative>
</div>
<p class="mt-2 text-xs text-destructive" role="alert" aria-live="polite">
Selected option is invalid
</p>
</div>
}
}
Auto Width
use leptos::prelude::*;
use crate::components::ui::select_native::{Label, SelectNative};
#[component]
pub fn DemoSelectNativeAutoWidth() -> impl IntoView {
const TARGET_ID: &str = "TARGET_NATIVE_AUTO_WIDTH";
view! {
<div class="space-y-2 min-w-[300px]">
<Label r#for=TARGET_ID>"Select with auto-width (native)"</Label>
<div class="w-fit">
<SelectNative id=TARGET_ID>
<option value="1">React</option>
<option value="2">Next.js</option>
<option value="3">Astro</option>
<option value="4">Gatsby</option>
</SelectNative>
</div>
</div>
}
}
Installation
# Coming soon :)
Usage
// Coming soon 🦀