Baustein UI

Layer · Forms

Beta

Select.

bau-select

Rich single-value dropdown. Each option carries a title, an optional subtitle and an icon slot — perfect for type pickers, status menus, country selectors. Form-associated via ElementInternals; full keyboard support.

Playground

Pick an option to see the trigger update. Toggle required + disabled, copy the markup below. 


                
              

            

          


          

            

              
Use cases

            

            

              Three patterns that exercise title + subtitle + icon. Subtitles
              let users pick by intent rather than memorising vocabulary.
            


            
Issue priority

            

              
                
                  
                
                
                  
                
                
                  
                
                
                  
                
              
            


            
Required selection

            

              
                
                
                
                
              
            


            
Inline language (no icons)

            

              
                
                
                
                
                
              
            


            
Grouped — assignee picker

            

              
                
                  
                    
                  
                  
                    
                  
                  
                    
                  
                
                
                  
                    
                  
                  
                    
                  
                
                
                  
                
              
            


            
Empty state

            

              
            

          


          

            

              
API

            

            

              
                

                  Attribute
                  Type
                  Default
                  Description
                

              
              
                

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

                

                  name
                  string
                  ''
                  Form field name. Submitted via ElementInternals.
                

                

                  value
                  string
                  ''
                  Currently selected option's value.
                

                

                  placeholder
                  string
                  ''
                  Shown in the trigger when no value is selected.
                

                

                  required
                  boolean (reflected)
                  false
                  Sets valueMissing when no value selected. Adds * to the label.
                

                

                  disabled
                  boolean (reflected)
                  false
                  Trigger non-interactive, panel won't open.
                

                

                  open
                  boolean (reflected)
                  false
                  Panel visibility. Toggleable from outside.
                

              
            

          


          

            

              
bau-option

            

            

              Slot child of bau-select. Each option carries its
              own value plus rich display.
            

            

              
                

                  Attribute / Slot
                  Description
                

              
              
                
valueString submitted when this option is selected.

                
titlePrimary line of the option.

                
subtitleMono-caps secondary line.

                
disabledSkipped by keyboard navigation, not selectable.

                
slot="icon"Leading icon (typically inline SVG, ~1.25rem). Mirrored to the trigger when selected.

              
            

          


          

            

              
bau-option-group

            

            

              Optional wrapper around bau-option children. Renders a
              caps-mono header and a hairline divider between groups. Setting
              disabled on the group disables every nested option —
              keyboard navigation skips them and they cannot be committed.
            

            

              
                

                  Attribute
                  Description
                

              
              
                
labelGroup header text. Mono caps, gedimmt.

                
disabledDisables every nested option in one stroke.

              
            

          


          

            

              
Keyboard

            

            

              
KeyBehavior

              
                
↓ / ↑Open the panel. When open, move the active cursor.

                
Home / EndJump to first / last option.

                
Enter / SpaceOpen the panel; commit the active option when open.

                
EscapeClose the panel, return focus to the trigger.