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 y56xt lcvuk"> <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="q0mum v3ope yob35"><!-- Export Contacts Card --> <div class="lx3ar aesap m457n peu41 xfco6 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="s8h7v dzc0w flex qj8qf items-center hxiry dark:border-neutral-700"> <h3 id="Export contacts (2).id.value" class="mwwf4 i6scm dark:text-neutral-200"> Export contacts (2).value </h3> </div> <!-- End Header --> <!-- Body --> <div class="dbwuq"> <!-- List Item --> <div class="tlcck z9z79 b8nfw nuqlm hxiry uz72l m457n dark:border-neutral-700"> <label class="ibyb7 daned dark:text-neutral-500"> Choose what contact details want to export: </label> <!-- Grid --> <div class="huvyz bd993 mpjax"> <div class="fqu9e"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Name </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> User ID </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Email </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> <div class="fqu9e"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Address </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Phone </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="tlcck z9z79 b8nfw nuqlm hxiry uz72l m457n dark:border-neutral-700"> <label class="ibyb7 daned dark:text-neutral-500"> Choose your format for exporting your contacts: </label> <div class="huvyz fqu9e"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Google CSV file </label> </div> <!-- End Radio --> </div> </div> <!-- End List Item --> <!-- List Item --> <div class="tlcck z9z79 b8nfw nuqlm hxiry uz72l m457n dark:border-neutral-700"> <label class="ibyb7 daned dark:text-neutral-500"> Date range </label> <div class="fqu9e"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Current month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Last month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> All </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Custom </label> </div> <!-- End Radio --> <div class="wx98z"> <button type="button" class="etcw0 jqzvs items-center syne5 zlgt1 mwwf4 klofg aesap m457n lx3ar i6scm peu41 dobbe j01y2 otank wh5re ss1ti dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="ylm2u enx0e" 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="lx3ar aesap m457n peu41 xfco6 dark:bg-neutral-800 dark:border-neutral-700"> <!-- Header --> <div class="s8h7v dzc0w flex qj8qf items-center hxiry dark:border-neutral-700"> <h3 id="Export contacts (2).id.value" class="mwwf4 i6scm dark:text-neutral-200"> Export contacts (2).value </h3> </div> <!-- End Header --> <!-- Body --> <div class="dbwuq"> <!-- List Item --> <div class="tlcck z9z79 b8nfw nuqlm hxiry uz72l m457n dark:border-neutral-700"> <label class="ibyb7 daned dark:text-neutral-500"> Choose what contact details want to export: </label> <!-- Grid --> <div class="huvyz bd993 mpjax"> <div class="fqu9e"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Name </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> User ID </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Email </label> </div> <!-- End Checkbox --> </div> <!-- End Col --> <div class="fqu9e"> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Address </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Phone </label> </div> <!-- End Checkbox --> <!-- Checkbox --> <div class="flex items-center"> <input type="checkbox" class="ylm2u yuuoo e4ige w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="tlcck z9z79 b8nfw nuqlm hxiry uz72l m457n dark:border-neutral-700"> <label class="ibyb7 daned dark:text-neutral-500"> Choose your format for exporting your contacts: </label> <div class="huvyz fqu9e"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmfm" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Google CSV file </label> </div> <!-- End Radio --> </div> </div> <!-- End List Item --> <!-- List Item --> <div class="tlcck z9z79 b8nfw nuqlm hxiry uz72l m457n dark:border-neutral-700"> <label class="ibyb7 daned dark:text-neutral-500"> Date range </label> <div class="fqu9e"> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Current month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew 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="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Last month </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> All </label> </div> <!-- End Radio --> <!-- Radio --> <div class="flex items-center"> <input type="radio" name="hs-pro-duecmdtr" class="ylm2u yuuoo drtn2 w3gzo o6r86 j01y2 otank 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="ibyb7 i6scm zmzew dark:text-neutral-400"> Custom </label> </div> <!-- End Radio --> <div class="wx98z"> <button type="button" class="etcw0 jqzvs items-center syne5 zlgt1 mwwf4 klofg aesap m457n lx3ar i6scm peu41 dobbe j01y2 otank wh5re ss1ti dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="ylm2u enx0e" 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