Inputs

inputs - Form

Style individual form controls and utilize common layouts.

A set of fields can appear grouped together

Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.

Inside jds-form - we need to use form-group first to make a input wrapper. Then we can set element-group insite it, beacuse we like to set a icon beside the input feilds.

A input and span should set togather. The span have a class element-flag, Also we can set size of the Icon/Flag, like:- element-xs, element-s, element-m ... element-xl

Related Class:- jds-form, form-group, form-label, form-element, form-message, element-color, element-range, element-textarea, form-actions

Form elements (deafult)

Label (text)

Label (text, disabled)

Label (text, readonly)


    Label (text)

You can use so many input type form element samr way. Like :- type="number, email, date, time, datetime-local, week, month, password, tel, url, "

Label (number)

Label (email)

Label (date)

Label (datetime-local)

Label (month)

Label (time)

Label (password)

Label (tel)

Label (url)

Label (week)

Also we have to use button in any form. Beacuse without action, form is useless almost. We have a seperate Button component. We need t ouse jds-btn for all batton. Then you can beautify the Button. Like :- jds-primary, jds-outline

You can check Button Component with variants Button Component

Variants

Related Class:- jds-form, form-group, form-label, form-element,

Form elements (variant)

Label (text)

Label (number)

Size

Related Class:- element-xs, element-s, element-m, element-l, element-xl

Example Sizes

input (xs)

input (xs disabled)

input (s)

input (s disabled)

input (m)

input (m disabled)

input (l)

input (l disabled)

input (xl)

input (xl disabled)



input (xl)

Example Flag and Sizes

input (xs)

input (s)

input (m)

input (l)

input (xl)

We need to use form-group first to make a input wraper. Then we can set element-group insite it, beacuse we like to set a icon beside the input

A input and span should set togather. The span have a class element-flag, Also we can set size of the Icon/Flag like:- element-xs, element-s, element-m ... element-xl



input (xl)

Text Area

Related Class:- jds-form, form-group, form-label, form-element, element-textarea

Selects Options

Related Class:- jds-form, form-group, form-label, form-element

Multiple Select

Related Class:- jds-form, form-group, form-label, form-element,

Some other elements