Input Field

Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals.

Types

There are a few different types of input field that the user can interact with:

Input Type	Type
`text`	Text	Default text input

Input Type	Type
`text`	Search	Used to input one or more terms to conduct a search.


      

        class="input-text-wrapper is-with-end-button u-width-full-line u-max-width-500"

        style="--amount-of-buttons:1"

      >

        

        

        

          class="button is-text is-only-icon"

          aria-label="Clear search"

          style="--button-size:1.5rem;"

        >

Input Type	Type
`password`	Password	Used to input passwords or other sensitive data.
-	Input with two buttons	Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit).


          

          

            Label

            

              

              

                

                  class="options-list-button"

                  aria-label="show password / hide password"

                  type="button"

                >

Input Type	Type
`numeric`	Numeric	Used for numeric input
-	Input with two buttons	Display with two buttons


      

        

          

            Label

            

              class="input-text-wrapper u-width-full-line u-max-width-500"

              style="--amount-of-buttons: 1;"

            >

              

                type="number"

                class="input-text u-remove-input-number-buttons"

                placeholder="Placeholder"

              />

              

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8"

                aria-label="Up value of numeric field"

                type="button"

              >

                

              

              

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8"

                aria-label="Down value of numeric field"

                type="button"

              >


          

          

            Disabled

            

              class="input-text-wrapper u-width-full-line u-max-width-500"

              style="--amount-of-buttons: 1;"

            >

              

                type="number"

                class="input-text u-remove-input-number-buttons"

                placeholder="Placeholder"

                disabled

              />

              

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8"

                aria-label="Up value of numeric field"

                type="button"

                disabled

              >

                

              

              

                class="button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8"

                aria-label="Down value of numeric field"

                type="button"

                disabled

              >

Input Type	Type
`file`	Upload file	Used in case upload a file is necessary.

Input Type	Type
`date`	Date	date input
`time`	Time	time input

Input Type	Type
`text`	Multi Select	Used to create ‘tags’ when the user types in the input field.


      

        

          

            Label

            

              

                

                  

                    

                      

                        role

                        

                      

                      

                        class="input-tag-delete-button"

                        aria-label="delete all:role tag"

                        type="button"

                      >

Input Type	Type
`select`	Dropdown	Allows users to choose one option from a list of values.

Custom Select

Dropdown is made with drop-list. To hide items use the u-hide class.


      

        

          

            Label

            

              

                class="input-text-wrapper u-width-full-line"

                type="button"

                style="--amount-of-buttons:1"

              >

                Placeholder

Custom Select with Search

Dropdown is made with drop-list. To hide items use the u-hide class.
To adjust arrow upl add the is-open class, where the element with custom-select class.
To show/hide the button clear field, toggle the u-hide class.


              

                

                  

                    

                      

                        

                          

                            class="u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray"

                          >

                            63f1efg667fg6fg67fc68ac3515e4bc06

                          

                          

                            Bessie, Cooper,

                            

                              bessiecooper@gmail.com

                            

                            , bessiecooper.com


                      

                    

                    

                      

                        

                          

                            class="u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray"

                          >

                            63f1efg6673515e4bc06

                          

                          

                            Baseball, Football,

                            ball@gmail.com

                            , playingball.com


              

                

                  

                    

                      

                        class="u-only-light"

                        src="/empty-state-light.svg"

                        alt=""

                        aria-hidden="true"

                        height="120"

                        width="128"

                      />

                      

                        class="u-only-dark"

                        src="/empty-state-dark.svg"

                        alt=""

                        aria-hidden="true"

                        height="120"

                        width="128"

                      />


                    

                      

                        Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’

                      

                      There are no documents that match your search.

                    

                    

                      

                        Clear Search

Input Type	Type
`textarea`	Textarea	For inputs containing more than two lines of text (for example: articles, blog posts, user feedback).

Verification code input

Input Type	Type
`verification-code-input`	character	Usualy used for code with numbers, but can use with amy type of input, limited for one char per textbox


      

        

          

            Enter Code

            

              

                

                  type="text"

                  class="verification-code-input u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input u-remove-input-number-buttons"

                  maxlength="1"

                />

State large for verification code input:

Class	Type
is-large	size	inrease size to 60px width & height


      

        

          

            Enter Code

            

              

                

                  type="text"

                  class="verification-code-input is-large u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input is-large u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input is-large u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input is-large u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input is-large u-remove-input-number-buttons"

                  maxlength="1"

                />

              

              

                

                  type="text"

                  class="verification-code-input is-large u-remove-input-number-buttons"

                  maxlength="1"

                />

States

States can be applied to all inputs fields:

Attribute	Type
-	Default	Default text input
`disabled`	Disabled	Used in case the user can’t interact with an input field
`readonly`	Readonly	Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button.

Helper Text

Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field.

Class	Type
-	Default	Used to provide information about what should be entered into the input field.
`u-success`	Success	An indication that the information entered into a field is valid/correct.
`u-warning`	Warning	Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error.
`u-error`	Error	An indication that the information entered into a field is invalid/incorrect.

This is a helper

This is success

This is a warning

This is an error


      

        

        This is a helper

      

      

        

        This is success

      

      

        

        This is a warning

      

      

        

        This is an error

Input with All Parameters Applied


      

        

          

            Label

            (optional)

            

              

              

                

                  Set variables or secret keys that will be passed as env vars to your function at

                  runtime.

                

              

            

            

              

                type="text"

                class="input-text is-warning u-padding-inline-end-56"

                placeholder="placeholder text"

              />

              

                4

                

                20


            

              

              This is a warning

            

          

          

            Label

            (optional)

            

              

              

                

                  Set variables or secret keys that will be passed as env vars to your function at

                  runtime.

                

              

            

            

              

                type="text"

                class="input-text is-warning u-padding-inline-end-120"

                placeholder="placeholder text"

              />

              

                class="buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12"

              >

                

                  

                    4

                    

                    20

                  

                

                

                  

                    

                    NULL


            

              

              This is a warning

            

          

          

            Label

            (optional)

            

              

              

                

                  Set variables or secret keys that will be passed as env vars to your function at

                  runtime.

                

              

            

            

              

                class="input-text is-warning u-padding-block-end-32"

                placeholder="Type here..."

                style="--amount-of-buttons: 0.25;"

              >

              

                class="buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12"

                style="border-end-end-radius:0.0625rem;"

              >

                

                  

                    4

                    

                    20

                  

                

                

                  

                    

                    NULL


            

              

              This is a warning