Baustein UI

Layer · Forms

Beta

Input.

bau-input

Single-line text input. Label in caps-micro style, focus ring in accent, setFormValue ensures the value shows up in native <form> submissions.

Playground

Toggle the props live. Code below mirrors the current state — copy and paste straight into your app. 


                
              

            

          


          

            

              
Use cases

            

            

              Concrete patterns that exercise the seven native types and
              their built-in inputmode / autocomplete behavior.
            


            
Sign-in

            

              
                
                
              
            


            
International contact

            

              
                
                
                
              
            


            
Numeric & search

            

              
                
                
              
            

          


          

            

              
API

              attributes & properties
            

            

              
                

                  Attribute
                  Type
                  Default
                  Description
                

              
              
                

                  label
                  string
                  ''
                  Caps-micro label above the field.
                

                

                  name
                  string
                  ''
                  Form field name. Propagated to the <form> via ElementInternals.
                

                

                  type
                  'text' | 'email' | 'tel' | 'url' | 'password' | 'number' | 'search'
                  'text'
                  Native input type. Drives inputmode, autocapitalize, spellcheck.
                

                

                  placeholder
                  string
                  ''
                  Placeholder text. Plain copy, no trailing ellipsis.
                

                

                  value
                  string
                  ''
                  Current value. Reacts to input event.
                

                

                  required
                  boolean
                  false
                  Sets valueMissing on empty submit. Red border lands only after first interaction or explicit error.
                

                

                  error
                  string
                  ''
                  Custom validity message. Setting it flips the field to invalid styling immediately.
                

              
            

          


          

            

              
Parts & tokens

              style hooks
            

            

              
                

                  Property / Part
                  Effect
                

              
              
                

                  ::part(label)
                  Outer <label> — style access from outside.
                

                

                  ::part(input)
                  Inner <input> — style access from outside.
                

                

                  --bau-input-height
                  Overrides height (default var(--bau-control-height-md)).
                

              
            

          


          

            

              
Touch / native feel

              platform integration
            

            

              Built in: touch-action: manipulation (no 300 ms
              tap delay), -webkit-tap-highlight-color: transparent
              (no iOS blue flash), -webkit-appearance: none (no UA
              rounded style), autocapitalize/autocorrect/spellcheck
              automatically disabled for email, tel,
              url, search, password.
              Long values fade to ellipsis on blur.