Getting started

Core

Utilities

Layout systems

Design

Components

Form elements

Others

Layout

JTB-Select

An advanced dropdown component for selecting options efficiently.

About

The JTB-Select is an advanced dropdown component designed to simplify the selection of options in forms and interfaces. With support for customizable styles, it enhances user experience by making option selection intuitive and efficient.

Its flexible structure allows seamless integration with various data sources and customization options, ensuring that the JTB-Select fits naturally into any web application layout.

How to use

To create a JTB-Select element in your projects, use the <jtb-select> tag in the way that suits your needs. Whether you add elements dynamically with JavaScript, directly in HTML, or through server-side languages like PHP, it doesn’t matter. As long as the component is correctly initialized, JTB_MD will handle the request of yours and render the element as specified.

<jtb-select options='[{"content": "Option1", "value": "1"}, {"content": "Option2", "value": "2"}]'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Set options -----*/ var myselect.options = [ { "content": "Option 1", "value": "1" }, { "content": "Option 2", "value": "2" } ]; /*----- Append select to DOM -----*/ document.body.append(myselect);

Customization

You can customize the JTB-Select element by applying one (or more) of its pre-defined attributes with the corresponding values. These attributes allow you to tailor the element to meet your specific requirements and preferences via modifying its behavior, functionality, appearance, design etc.

Content and display

options

To specify the options that you want to display in the select box you can simply provide them as a json-array in the options attribute of element.

For the content of element, use content attribute, for the value use value

<jtb-select options='[{"content": "Option1", "value": "1"}, {"content": "Option2", "value": "2"}]'></jtb-select>

To specify an option as selected by default you can add selected attribute to its object with value true

<jtb-select options='[{"content": "Option1", "value": "1"}, {"content": "Option2", "value": "2", "selected": true}]'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Set options -----*/ var myselect.options = [ { "content": "Option 1", "value": "1" }, { "content": "Option 2 is selected", "value": "2", "selected": true } ]; /*----- Append select to DOM -----*/ document.body.append(myselect);

placeholder

If you want to specify a placeholder, use the element's placeholder attribute.

<jtb-select placeholder='I have placeholder!'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Set placeholder -----*/ var myselect.placeholder = 'I have placeholder!';

name

For specifying a name to your select element, you can use name attribute of JTB-select.

<jtb-select name='test'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Define name -----*/ var myselect.name = 'test';

value

To create an element with pre-define value, you can use value attribute of it.

<jtb-select value='2' options='[{"content": "Option1", "value": "1"}, {"content": "Option2 is selected via value", "value": "2"}]'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Set options -----*/ var myselect.options = [ { "content": "Option 1", "value": "1" }, { "content": "Option2 is selected via value", "value": "2" } ]; /*----- Set value -----*/ myselect.value = '2'; /*----- Append select to DOM -----*/ document.body.append(myselect);

disabled

If you want to disable an element, you can append disabled attribute into it.

<jtb-select disabled></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Disable element -----*/ var myselect.disabled = true;

label

To add a label to your JTB-select element, simply include the label attribute with the desired text. This will display the text as a label for the select field.

<jtb-select label='Label'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Define label -----*/ var myselect.label = 'Label';

helper

Helper texts provide users with guidance while entering select. To create a helper text, simply specify it using the helper attribute in your JTB-Select element.

<jtb-select helper='This is a helper text.'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Define helper text -----*/ var myselect.helper = 'This is a helper text';

icon

To use an icon in your select element, simply set the icon attribute with the identifier of your desired icon.

By default, the icon template is set to: <i class='{icon}'></i> where {icon} serves as a placeholder that will be replaced by the value of the icon attribute.

<jtb-select icon='jtbi-l-atom'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Add atom icon & animation -----*/ myselect.icon = 'jtbi-l-atom';

Instead of using the default template, you can also specify your own custom template to generate icons exactly the way you want. Simply define your desired structure using the icon_template attribute, where {icon} will be replaced by the value of the icon attribute.

<jtb-select icon_template='<svg class="jtbi" style="--size: 1.2rem;"><use xlink:href="{icon}"></use></svg>' icon='images/jtbicons/svg-sprites/linear.svg#atom'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Define your template -----*/ myselect.icon_template = '<svg class="jtbi" style="--size: 1.2rem;"><use xlink:href="{icon}"></use></svg>'; /*----- Add icon -----*/ myselect.icon = 'images/jtbicons/svg-sprites/linear.svg#atom';

required

To make your select element required for form submission, you can use required attribute of JTB-select.

<jtb-select required></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Make element required -----*/ myselect.required = true;

Style and appearance

color

To customize the color palette of select boxes, use the color attribute to specify your preferred palette.

<jtb-select color='purple'></jtb-select>  <jtb-select color='blue'></jtb-select>  <jtb-select color='aqua'></jtb-select>  <jtb-select color='green'></jtb-select>  <jtb-select color='lime'></jtb-select>  <jtb-select color='yellow'></jtb-select>  <jtb-select color='orange'></jtb-select>  <jtb-select color='volcano'></jtb-select>  <jtb-select color='red'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Adjust color -----*/ myselect.color = 'purple'; // Set color = purple myselect.color = 'blue'; // Set color = blue myselect.color = 'aqua'; // Set color = aqua myselect.color = 'green'; // Set color = green myselect.color = 'lime'; // Set color = lime myselect.color = 'yellow'; // Set color = yellow myselect.color = 'orange'; // Set color = orange myselect.color = 'volcano'; // Set color = volcano myselect.color = 'red'; // Set color = red

size

To adjust the size of the select element, use the size attribute to specify your desired value.

Available options are: xs | sm | md | lg | xl.

<jtb-select size='xs'></jtb-select>  <jtb-select size='sm'></jtb-select>  <jtb-select size='md'></jtb-select>  <jtb-select size='lg'></jtb-select>  <jtb-select size='xl'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Adjust size -----*/ myselect.size = 'xs'; // Set size = xs myselect.size = 'sm'; // Set size = sm myselect.size = 'md'; // Set size = md myselect.size = 'lg'; // Set size = lg myselect.size = 'xl'; // Set size = xl

shape

To change the shape of the select element, use the shape attribute with your desired value.

Available options are: default | rect | pill.

<jtb-select shape='default'></jtb-select>  <jtb-select shape='rect'></jtb-select>  <jtb-select shape='pill'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Adjust shape -----*/ myselect.shape = 'default'; // Set shape = default myselect.shape = 'rect'; // Set shape = rect myselect.shape = 'pill'; // Set shape = pill

Listeners & Callbacks

JTB select elements inherit all global listeners and callbacks from the base component, ensuring seamless handling for lifecycle events. For a detailed overview of inherited listeners and callbacks, refer to the Base component - Core page.

Additionally, JTB selects has its own listeners and callbacks:

_change

Triggered when the component’s value is modified and the change is finalized. This event is useful for tracking user select, updating related elements, or triggering form submissions.

<jtb-select _change='alert("Value changed!")'></jtb-select>

/*----- Create element -----*/ var myselect = document.createElement('jtb-select'); /*----- Define _change listener -----*/ myselect._change = () => { alert("Value changed!"); };

Methods

Similar to listeners and callbacks, JTB selects also inherit all methods from the base component, enabling seamless functionality. For a complete list of available methods, visit the Base component - Core page.

API

While each property on its own brings unique changes to the elements, combining them can help you create the perfect one.

For making it easier to navigate through all the attributes, we’ve created a comprehensive table for you. Below, you can find a list of all and their uses.