Input

Single-line text. Use Textarea when the value can wrap, Combobox when it comes from a known list.

Sizes

Default in this port is 40px (also aliased as medium). small is 32px, large is 48px.


        
          1
          
          <Input size="small" placeholder="Small" />
        

          2
          
          <Input placeholder="Default" />
        

          3
          
          <Input size="large" placeholder="Large" />

Prefix and suffix

String addons, icon slots, or both. prefix-styling and suffix-styling drop the tinted rail.

https://.com

vercel/


        
          1
          
          <Input placeholder="Default">
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon="ArrowUp01Icon" :size="14" />
        

          4
          
            </template>
        

          5
          
          </Input>
        

          6
          
           
        

          7
          
          <Input prefix="https://" suffix=".com" placeholder="example" />
        

          8
          
           
        

          9
          
          <Input
        

          10
          
            prefix="vercel/"
        

          11
          
            :prefix-styling="false"
        

          12
          
            :suffix-styling="false"
        

          13
          
            :suffix-container="false"
        

          14
          
            placeholder="docs"
        

          15
          
          >
        

          16
          
            <template #suffix>
        

          17
          
              <Icon :icon="ArrowUp01Icon" :size="14" />
        

          18
          
            </template>
        

          19
          
          </Input>

Disabled

https://.com


        
          1
          
          <Input disabled placeholder="Disabled with placeholder" />
        

          2
          
          <Input disabled default-value="Disabled with value" />

Error

error paints the border red and renders the message under the field.

An error message.


        
          1
          
          <Input
        

          2
          
            size="small"
        

          3
          
            error="An error message."
        

          4
          
            placeholder="long-error@gmail.com"
        

          5
          
          />

Label

Passing label renders Label above the field and wires html-for for you.

Project Name


        
          1
          
          <Input label="Project Name" placeholder="my-awesome-project" />

Rounded

rounded makes a pill. Pair it with prefix / suffix for domain-style fields.

www..com


        
          1
          
          <Input
        

          2
          
            rounded
        

          3
          
            prefix="www."
        

          4
          
            suffix=".com"
        

          5
          
            placeholder="example"
        

          6
          
          />
        

          7
          
           
        

          8
          
          <Input
        

          9
          
            rounded
        

          10
          
            prefix="www."
        

          11
          
            suffix=".com"
        

          12
          
            :prefix-styling="false"
        

          13
          
            :suffix-styling="false"
        

          14
          
            placeholder="example"
        

          15
          
          />

Best practices

One line of free-form text: names, domains, tokens. Multi-line → Textarea. Filter a known list → Combobox. Inline search → Search Input, not this field inside another form.
Validate on blur. Pass a sentence to error: "Project name is required." Skip "please".
Labels are short Title Case nouns. Placeholders are example values (example.com), never instructions.
Keep the field focusable while saving. disabled only when typing is impossible.
size="medium" matches default (40px). New code can use either; product chrome often wants small.
Bind with v-model. Native attributes (type, placeholder, autocomplete) fall through to the inner input.