Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Export Data
Mix and match with checkboxes and radio buttons.
Export Contacts
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative kby5p ly3m4"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="qaxp8 vy47a huxlp"><!-- Export Contacts Card --> <div class="m9vu4 efs5t kq7zk ycht7 dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="pykdd iwwvx flex m0bgt items-center vcvf1 dark:border-neutral-700"> <h3 id="Export contacts (2).id.value" class="f4yq1 p9tun dark:text-neutral-200"> Export contacts (2).value </h3> </div> <!-- End Header --> <!-- Body --> <div class="u3doq"> <!-- List Item --> <div class="ddjby we17s mjq4t txhzb vcvf1 h35z1 kq7zk dark:border-neutral-700"> <label class="pdak6 z1v6e dark:text-neutral-500"> Choose what contact details want to export: </label> <!-- Grid --> <div class="jglyo i80r8 wt0nu"> <div class="wvkwg"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte1" checked> <label for="hs-pro-duecmwcdte1" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Name </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte2" checked> <label for="hs-pro-duecmwcdte2" class="pdak6 p9tun d9qfm dark:text-neutral-400"> User ID </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte3" checked> <label for="hs-pro-duecmwcdte3" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Email </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> <div class="wvkwg"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte4" checked> <label for="hs-pro-duecmwcdte4" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Address </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte5" checked> <label for="hs-pro-duecmwcdte5" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Phone </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte6"> <label for="hs-pro-duecmwcdte6" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Signed up as </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <!-- End List Item --> <!-- List Item --> <div class="ddjby we17s mjq4t txhzb vcvf1 h35z1 kq7zk dark:border-neutral-700"> <label class="pdak6 z1v6e dark:text-neutral-500"> Choose your format for exporting your contacts: </label> <div class="jglyo wvkwg"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmfm1" checked> <label for="hs-pro-duecmfm1" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Regular CSV file </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmfm2"> <label for="hs-pro-duecmfm2" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Google CSV file </label> </div> <!-- End Radio --> </div> </div> <!-- End List Item --> <!-- List Item --> <div class="ddjby we17s mjq4t txhzb vcvf1 h35z1 kq7zk dark:border-neutral-700"> <label class="pdak6 z1v6e dark:text-neutral-500"> Date range </label> <div class="wvkwg"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr1" checked> <label for="hs-pro-duecmdtr1" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Today (18 Feb) </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr2"> <label for="hs-pro-duecmdtr2" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Current month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr3"> <label for="hs-pro-duecmdtr3" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Last 7 days </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr4"> <label for="hs-pro-duecmdtr4" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Last month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr5"> <label for="hs-pro-duecmdtr5" class="pdak6 p9tun d9qfm dark:text-neutral-400"> All </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr6"> <label for="hs-pro-duecmdtr6" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Custom </label> </div> <!-- End Radio --> <div class="ohyoe"> <button type="button" class="g0aw2 s2k2k items-center dsp0o bqo3s f4yq1 awdil efs5t kq7zk m9vu4 p9tun ycht7 r73cx xwjcj c3i4e r0fp5 ckvf9 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> 1 Jan 2023 - 18 Feb 2023 </button> </div> </div> </div> <!-- End List Item --> </div> <!-- End Body --> </div> <!-- End Export Contacts Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script> </body> </html></script>
<!-- Export Contacts Card --> <div class="m9vu4 efs5t kq7zk ycht7 dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="pykdd iwwvx flex m0bgt items-center vcvf1 dark:border-neutral-700"> <h3 id="Export contacts (2).id.value" class="f4yq1 p9tun dark:text-neutral-200"> Export contacts (2).value </h3> </div> <!-- End Header --> <!-- Body --> <div class="u3doq"> <!-- List Item --> <div class="ddjby we17s mjq4t txhzb vcvf1 h35z1 kq7zk dark:border-neutral-700"> <label class="pdak6 z1v6e dark:text-neutral-500"> Choose what contact details want to export: </label> <!-- Grid --> <div class="jglyo i80r8 wt0nu"> <div class="wvkwg"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte1" checked> <label for="hs-pro-duecmwcdte1" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Name </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte2" checked> <label for="hs-pro-duecmwcdte2" class="pdak6 p9tun d9qfm dark:text-neutral-400"> User ID </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte3" checked> <label for="hs-pro-duecmwcdte3" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Email </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> <div class="wvkwg"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte4" checked> <label for="hs-pro-duecmwcdte4" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Address </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte5" checked> <label for="hs-pro-duecmwcdte5" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Phone </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="h21yx wv197 fa0ty oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte6"> <label for="hs-pro-duecmwcdte6" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Signed up as </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <!-- End List Item --> <!-- List Item --> <div class="ddjby we17s mjq4t txhzb vcvf1 h35z1 kq7zk dark:border-neutral-700"> <label class="pdak6 z1v6e dark:text-neutral-500"> Choose your format for exporting your contacts: </label> <div class="jglyo wvkwg"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmfm1" checked> <label for="hs-pro-duecmfm1" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Regular CSV file </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmfm2"> <label for="hs-pro-duecmfm2" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Google CSV file </label> </div> <!-- End Radio --> </div> </div> <!-- End List Item --> <!-- List Item --> <div class="ddjby we17s mjq4t txhzb vcvf1 h35z1 kq7zk dark:border-neutral-700"> <label class="pdak6 z1v6e dark:text-neutral-500"> Date range </label> <div class="wvkwg"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr1" checked> <label for="hs-pro-duecmdtr1" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Today (18 Feb) </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr2"> <label for="hs-pro-duecmdtr2" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Current month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr3"> <label for="hs-pro-duecmdtr3" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Last 7 days </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr4"> <label for="hs-pro-duecmdtr4" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Last month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr5"> <label for="hs-pro-duecmdtr5" class="pdak6 p9tun d9qfm dark:text-neutral-400"> All </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="h21yx wv197 lli30 oqj39 xp6ug xwjcj c3i4e dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr6"> <label for="hs-pro-duecmdtr6" class="pdak6 p9tun d9qfm dark:text-neutral-400"> Custom </label> </div> <!-- End Radio --> <div class="ohyoe"> <button type="button" class="g0aw2 s2k2k items-center dsp0o bqo3s f4yq1 awdil efs5t kq7zk m9vu4 p9tun ycht7 r73cx xwjcj c3i4e r0fp5 ckvf9 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg> 1 Jan 2023 - 18 Feb 2023 </button> </div> </div> </div> <!-- End List Item --> </div> <!-- End Body --> </div> <!-- End Export Contacts Card -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close