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 h3sa8 du2fm"> <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="w-full kefpk pvi3v"><!-- Export Contacts Card --> <div class="nz7b4 qm5z2 khwhk fwpr6 u33oi dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="xwz3o x7giz flex fa4f9 items-center bm6ej dark:border-neutral-700"> <h3 id="Export contacts (2).id.value" class="zd5ha t4wtn dark:text-neutral-200"> Export contacts (2).value </h3> </div> <!-- End Header --> <!-- Body --> <div class="cz83v"> <!-- List Item --> <div class="fp4or i2zc4 a5bai hh7j9 bm6ej apjy2 khwhk dark:border-neutral-700"> <label class="a3wk8 kugle dark:text-neutral-500"> Choose what contact details want to export: </label> <!-- Grid --> <div class="vvl4w o4dae ytg72"> <div class="btu4g"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Name </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> User ID </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Email </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> <div class="btu4g"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Address </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Phone </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="fp4or i2zc4 a5bai hh7j9 bm6ej apjy2 khwhk dark:border-neutral-700"> <label class="a3wk8 kugle dark:text-neutral-500"> Choose your format for exporting your contacts: </label> <div class="vvl4w btu4g"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Google CSV file </label> </div> <!-- End Radio --> </div> </div> <!-- End List Item --> <!-- List Item --> <div class="fp4or i2zc4 a5bai hh7j9 bm6ej apjy2 khwhk dark:border-neutral-700"> <label class="a3wk8 kugle dark:text-neutral-500"> Date range </label> <div class="btu4g"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Current month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Last month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> All </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Custom </label> </div> <!-- End Radio --> <div class="g7jhb"> <button type="button" class="jxbdw rl1tg items-center klk5r egssd zd5ha zb2tq qm5z2 khwhk nz7b4 t4wtn fwpr6 w8bqc iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="xqknn ccfki" 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=1.0.0"></script> </body> </html></script>
<!-- Export Contacts Card --> <div class="nz7b4 qm5z2 khwhk fwpr6 u33oi dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="xwz3o x7giz flex fa4f9 items-center bm6ej dark:border-neutral-700"> <h3 id="Export contacts (2).id.value" class="zd5ha t4wtn dark:text-neutral-200"> Export contacts (2).value </h3> </div> <!-- End Header --> <!-- Body --> <div class="cz83v"> <!-- List Item --> <div class="fp4or i2zc4 a5bai hh7j9 bm6ej apjy2 khwhk dark:border-neutral-700"> <label class="a3wk8 kugle dark:text-neutral-500"> Choose what contact details want to export: </label> <!-- Grid --> <div class="vvl4w o4dae ytg72"> <div class="btu4g"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Name </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> User ID </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Email </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> <div class="btu4g"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Address </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Phone </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="fp4or i2zc4 a5bai hh7j9 bm6ej apjy2 khwhk dark:border-neutral-700"> <label class="a3wk8 kugle dark:text-neutral-500"> Choose your format for exporting your contacts: </label> <div class="vvl4w btu4g"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Google CSV file </label> </div> <!-- End Radio --> </div> </div> <!-- End List Item --> <!-- List Item --> <div class="fp4or i2zc4 a5bai hh7j9 bm6ej apjy2 khwhk dark:border-neutral-700"> <label class="a3wk8 kugle dark:text-neutral-500"> Date range </label> <div class="btu4g"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Current month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp 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="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Last month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> All </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="xqknn p0r8k icuyk tiwe1 f9924 iec4s haq8z 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="a3wk8 t4wtn osevp dark:text-neutral-400"> Custom </label> </div> <!-- End Radio --> <div class="g7jhb"> <button type="button" class="jxbdw rl1tg items-center klk5r egssd zd5ha zb2tq qm5z2 khwhk nz7b4 t4wtn fwpr6 w8bqc iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="xqknn ccfki" 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