Twinkle
Design System
TDS
Request

Fields v1.0.1

Fields facilitate data entry through text inputs, selects, and text areas, designed for user accuracy and form consistency. They streamline interactions, from concise inputs to extended texts, ensuring seamless data management across interfaces.

JS twinkle-select-js-v1.0.1 & twinkle-select-css-v1.0.1

Copy js and css 
				
					<link href="https://tds.bwelz.org/twinkle-fields/v1.0.1/twinkle-fields-v1.0.1.css?Expires=1830297600&Signature=Vw82agkQ9nzUk4N2rv8OB2E26GaM1pY32isPTiJRBSyXReHIhTg7fIAzw9gJecnnqMI8JnIwgWHx-JweW-aWqOcnNkX6gYbXqYHzt133y7DiCd8D4p-MNGBtJR38O8FP3Cne7MSMXdORwmFfPCD5irULoWZ5AdELjBJDrggSCBdL3L3p5bTieyF2pdP3oV-ebXx3QsxA1rBUzL2qMX2UZCUm8kmXqirNlasEs2bw1zTRuozRkxgsISSRb-qNx2psssB5SNcwhhWJSc2aDmgkVNY8iGDcX7MoDG6aqgBooRSsY0wgDtwDEoVvV6MtCg8wq15niqwZTVbcz0yJTkwedA__&Key-Pair-Id=K1PPZDIOWN47R1" rel="stylesheet">

				
			
				
					<script src="https://tds.bwelz.org/twinkle-fields/v1.0.1/twinkle-fields-select-v1.0.1.js?Expires=1830297600&Signature=W1ZBQMEhq3SSqVeKqOCdNXv7Qk-MH1DgXEEbgQYCKm6lcFtfYChM50rdyHDTOXVWGQmgdAa6HxlHZNu6mJ1WJvv~dm6bW2mAODGzuFw8UpdhXYNl~PCHY3-OYSKezGoiV5cT~VUiRJy9AQU9usuQGQf1Y~pgxa8nGcFLjlaEQMoGGYnELcrzPQaGBkJW2jNLk0hXOYYyvxs7-akKczLwMROJtkX08yYkfIWFAUr97betyDMHqDdTCpIrLOZcii44KtOHvqPPbB021grzasK2WSvju-vqh7IFJlJYXmxxt89QJxGprJKzJZQx8WXaaV9KjbBnkru1gW0dxEjBE4V43Q__&Key-Pair-Id=K1PPZDIOWN47R1"></script>

Bundle

Add the files downloaded to the needed bundle. 
				
					bundles.Add(new StyleBundle("~/Bundles/general-bundle-css",
          "~/Content/twinkle-select-css-v1.0/twinkle-style.css"
   );
				
			
				
					bundles.Add(new Bundle("~/Bundles/general-bundle-js").Include(
                "~/Scripts/ExternalLibraries/twinkle-select-js-v1.0/twinkle-select.js"
                ));

Trigger js

To trigger the js, make sure these functions are executed. Example: In WelsPortal these functions are placed in the AppInit.ts file. 
				
					// Initializes all Selects with the Class 'TWselect'
    $(`${element}.TWselect`).twSelect({
        allowClear: false,
        theme: 'partnerhub',
        width: 'auto',
        placeholder: 'Select Option',
        minimumResultsForSearch: 10
    });

    $(`${element}.TWselectMultiple`).twSelect({
        theme: 'partnerhub',
        width: 'auto',
        closeOnSelect: false,
        selectAll: false,
        allowClear: true,
        placeholder: "Choose multiple",
        minimumResultsForSearch: 10
    });

    // Disables translations
    $('.twSelect-container, .TWselect, .twSelect-selection, .TWmultipleSelect').addClass('notranslate');
    $('.twSelect-container, .TWselect, .twSelect-selection, .TWmultipleSelect').addClass('skiptranslate');

    // To comply with ARIA guidelines
    $('.twSelect-selection__choice, .twSelect-selection__placeholder').css('overflow', 'auto');

    // The Search is within the Input instead of inside the Dropdown like the regular Select Picker
    $('.TWmultipleSelect').parent().find('.twSelect-search, .twSelect-focusser').remove();

    $('.TWmultipleSelect').on('twSelect:opening twSelect:closing', () => {
        $('.TWmultipleSelect').parent().find('.twSelect-search, .twSelect-focusser').remove();
    });

    // Twinkle Fields
    $('.tw-field-group').find('.tw-field-control').each(function (index, ele) {
        var $ele = $(ele);
        if ($ele.val() != '' || $ele.is(':selected') === true) {
            $ele.parents('.tw-field-group').addClass('focused');
        }
    })
    $('.tw-field-control').on('focus', function (e) {
        $(this).parents('.tw-field-group').addClass('focused');
    }).on('blur', function () {
        if ($(this).val().length > 0) {
            $(this).parents('.tw-field-group').addClass('focused');
        } else {
            $(this).parents('.tw-field-group').removeClass('focused');
        }
    });
    $('.tw-field-control').on('change', function (e) {
        if ($(this).is('select')) {
            if ($(this).val() === $("option:first", $(this)).val()) {
                $(this).parents('.tw-field-group').removeClass('focused');
            }
            else {
                $(this).parents('.tw-field-group').addClass('focused');
            }
        }
    })

    //---- Twinkle Select single----
    $('.TWselect').each(function () {
        $(this).on("twSelect:open", function (e) {
            $(this).parents('.tw-field-group').addClass('focused');
        }).on("twSelect:close", function (e) {
            if ($(this).find(':selected').val() === '') {
                $(this).parents('.tw-field-group').removeClass('focused');
            }
        });
    });

    //---- Twinkle Select multiple----
    $('.TWselectMultiple').each(function () {
        
        $(this).on("twSelect:open", function (e) {
            $(this).parents('.tw-field-group').addClass('focused');
        }).on("twSelect:close", function (e) {
            if ($(this).val() != '') {
                $(this).parents('.tw-field-group').addClass('focused');
            } else {
                $(this).parents('.tw-field-group').removeClass('focused');
            }
        }).on("twSelect:select", function (e) {
            $(this).parents('.tw-field-group').addClass('focused');
        }).on("twSelect:unselect", function (e) {
            $(this).parents('.tw-field-group').addClass('focused');
        })
    });

HTML

Make sure the HTML elements has this structure. 
				
					<!-- Single select drop-down element -->
<div class="tw-field-group tw-field-floating-group twSelectPart twSelectMultiple">
    <label class='fieldLabel'>
        Label Name 
    </label>
    <select class="TWselect tw-field-control tw-field-floating-control" data-placeholder="Select a Label Name">
        <option value=""></option>
        <option value="1"> Option 1 </option>
        <option value="2"> Option 2 </option>
    </select>
</div>
    
<!-- Multiple select drop-down element -->
<div class="tw-field-group tw-field-floating-group twSelectPart twSelectMultiple">
    <label class='fieldLabel'>
        Label Name
    </label>
    <select class="TWselectMultiple tw-field-control tw-field-floating-control" multiple="multiple" data-placeholder="Choose one or more Label Name">
        <option value=""></option>
        <option value="1"> Option 1 </option>
        <option value="2"> Option 2 </option>
    </select>
</div>

Examples (HTML)

Make sure the HTML elements has this structure. 
				
					 <div class="tw-form">

     <!-- Single select drop-down element -->
     <div class="tw-field-group tw-field-floating-group twSelectPart">
         <label class='fieldLabel'>
             Label Name
         </label>
         <select class="TWselect tw-field-control tw-field-floating-control" data-placeholder="Select a Label Name">
             <option value=""></option>
             <option value="1"> Option 1 </option>
             <option value="2"> Option 2 </option>
         </select>
     </div>

     <!-- Multiple select drop-down element -->
     <div class="tw-field-group tw-field-floating-group twSelectPart twSelectMultiple">
         <label class='fieldLabel'>
             Label Name
         </label>
         <select class="TWselectMultiple tw-field-control tw-field-floating-control" multiple="multiple" data-placeholder="Choose one or more Label Name">
             <option value=""></option>
             <option value="3"> Option 3 </option>
             <option value="4"> Option 4 </option>
         </select>
     </div>

     <!-- Input element -->
     <div class="tw-field-group tw-field-floating-group">
         <label class='fieldLabel'>
             Label Name for Input
         </label>
         <input type="text" class="tw-field-control tw-field-floating-control" data-placeholder="Enter Text Here" />
     </div>

     <!-- Checkbox element -->
     <div class="tw-field-group tw-check">
         <label for="mycheckbox">Label Name for Checkbox</label>
         <input type="checkbox" id="mycheckbox" class="tw-field-control" />
     </div>

     <!-- Toggle Switch Enabled/Disabled -->
     <div class="tw-field-group tw-check tw-toggle-wrapper">
         <label for="MySwitch" class="tw-hidden">Enabled/Disabled</label>
         <div class="tw-toggle">
             <input type="checkbox" id="PossibleResponses[0].Active" name="MySwitch" class="tw-toggle-switch tw-field-control tw-field-floating-control" value="true" checked>
             <span class="tw-toggle-on">Enabled</span>
             <span class="tw-toggle-off">Disabled</span>
             <div class="tw-toggle-circle"></div>
         </div>
     </div>

     <div class="tw-field-group tw-check tw-check-additional">
         <input type="checkbox" id="check" class="tw-field-control" />
         <label for="check">Additional Input</label>
         <input type="text" placeholder="Add something here..." class="tw-field-additional" />
     </div>





     <!-- Radio Button Group -->
     <div class="tw-field-group tw-radio">
         <label for="myradiobutton1">Option 1</label>
         <input type="radio" id="myradiobutton1" name="myradiogroup" class="tw-field-control" />
     </div>
     <div class="tw-field-group tw-radio">
         <label for="myradiobutton2">Option 2</label>
         <input type="radio" id="myradiobutton2" name="myradiogroup" class="tw-field-control" />
     </div>



     <!-- Textarea element -->
     <div class="tw-field-group tw-field-floating-group">
         <label class='fieldLabel'>
             Label Name for Textarea
         </label>
         <textarea class="tw-field-control tw-field-floating-control" data-placeholder="Enter multiple lines of text here"></textarea>
     </div>

     <!-- Date input element -->
     <div class="tw-field-group tw-field-floating-group">
         <label class='fieldLabel'>
             Date
         </label>
         <input type="text" class="tw-field-control tw-field-floating-control tw-dates" id="datepicker" data-placeholder="Select a Date" />

     </div>

     <!-- Duration input elements -->
     <div class="tw-field-group tw-field-floating-group">
         <label class='fieldLabel'>
             Duration Hours
         </label>
         <input type="text" class="tw-field-control tw-field-floating-control tw-times" id="" data-placeholder="Duration Hours" />

     </div>


     <!-- From date input element -->
     <div class="tw-field-group tw-field-floating-group">
         <label class='fieldLabel'>
             From - To
         </label>
         <input type="text" class="tw-field-control tw-field-floating-control tw-range-calendar" id="" data-placeholder="Select a range of dates" />

     </div>




 </div><!-- end form-elements -->

JS Code

Picture of Herbert Cabrera
Herbert Cabrera

Software Developer

JS Code

Picture of Sandro Perez
Sandro Perez

Software Developer

Design

Picture of Abel Ferro
Abel Ferro

Twinkle System Designer

CDN

Picture of Raul Suarez
Raul Suarez

DevOps Engineer

Scroll to Top