Select

Native dropdown for a short, fixed list. Default size in this port is medium (32px).

Sizes

small is 24px, medium is 32px, large is 40px. size='default' falls through to medium.


        
          1
          
          <Select size='small' placeholder='Small' aria-label='Small'>
        

          2
          
            <option value='1'>Option 1</option>
        

          3
          
          </Select>
        

          4
          
          <Select size='medium' placeholder='Medium' aria-label='Medium'>
        

          5
          
            <option value='1'>Option 1</option>
        

          6
          
          </Select>
        

          7
          
          <Select size='large' placeholder='Large' aria-label='Large'>
        

          8
          
            <option value='1'>Option 1</option>
        

          9
          
          </Select>

Prefix and suffix


        
          1
          
          <Select placeholder='Region' size='small' aria-label='Region'>
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon='Globe02Icon' :size='14' />
        

          4
          
            </template>
        

          5
          
            <option value='sfo'>San Francisco</option>
        

          6
          
          </Select>

With options

v-model or default-value. Children are native option and optgroup nodes.


        
          1
          
          <Select v-model='fruit' placeholder='Select a fruit' aria-label='Fruit'>
        

          2
          
            <option value='apple'>Apple</option>
        

          3
          
            <option value='orange'>Orange</option>
        

          4
          
            <option value='banana'>Banana</option>
        

          5
          
          </Select>
        

          6
          
           
        

          7
          
          <Select default-value='banana' placeholder='With default' aria-label='Fruit default'>
        

          8
          
            <option value='apple'>Apple</option>
        

          9
          
            <option value='banana'>Banana</option>
        

          10
          
          </Select>

Label and required

label renders above the control. required adds the red asterisk and the native constraint.

Framework *


        
          1
          
          <Select
        

          2
          
            label='Framework'
        

          3
          
            required
        

          4
          
            placeholder='Select a framework'
        

          5
          
          >
        

          6
          
            <option value='nuxt'>Nuxt</option>
        

          7
          
            <option value='next'>Next.js</option>
        

          8
          
          </Select>

Error

Pass a sentence to error. The control turns red and the message is wired with aria-describedby.

Select a region.


        
          1
          
          <Select
        

          2
          
            error='Select a region.'
        

          3
          
            placeholder='Region'
        

          4
          
            aria-label='Region'
        

          5
          
          >
        

          6
          
            <option value='sfo'>San Francisco</option>
        

          7
          
          </Select>

Disabled


        
          1
          
          <Select disabled placeholder='Disabled with placeholder' aria-label='Disabled'>
        

          2
          
            <option value='1'>Option 1</option>
        

          3
          
          </Select>

Best practices

Short fixed lists (under ~10). Filtering belongs on Combobox. Several values at once is MultiSelect.
Two or three compact peers in a pill → Switch. Two to six options that must stay visible → Radio.
Group long lists with native <optgroup>. This port has no Select.Group.
Label is a Title Case noun (Region). Placeholder is an action (Select a region), never "Choose one…".
Options keep one register and canonical spelling (Next.js, not NextJS).
Validate on blur and pass a full sentence to error, ending in a period.