InputWrapper

The chrome shared by Input, Select, Textarea and Autocomplete — border, sizing, focus ring, invalid state and the prefix/suffix icon slots. Reach for it when you need a control the library does not ship but want it to sit flush with the ones it does.

Composition

The chrome shared by the built-in inputs — use it to build your own. See Composing Forms.

Import

import { InputWrapper } from 'vuiii'

Basic Usage

Give the inner element the vuiii-input__nested class so it inherits the typography and padding instead of bringing its own.

View in Storybook

<InputWrapper prefix-icon="mail">
  <input class="vuiii-input__nested" type="email" v-model="email" />
</InputWrapper>

Props

Prop	Type	Default	Description
prefixIcon	string	-	Icon name shown before the control
suffixIcon	string	-	Icon name shown after the control
prefixIconClickable	boolean	false	Renders the prefix icon as a focusable button
suffixIconClickable	boolean	false	Renders the suffix icon as a focusable button
prefixIconLabel	string	-	Accessible label for a clickable prefix icon
suffixIconLabel	string	-	Accessible label for a clickable suffix icon
size	'small' | 'normal' | 'large'	'normal'	Control size
invalid	boolean	false	Applies the invalid/error styling
pill	boolean	false	Rounded pill shape

Slots

Slot	Description
default	The control itself
prefix	Content before the control (replaces prefixIcon)
suffix	Content after the control (replaces suffixIcon)

Events

Event	Payload	Description
prefix-icon-click	-	When the prefix icon is clicked
suffix-icon-click	-	When the suffix icon is clicked

Sizes and Validation State

The same props the built-in inputs expose, because they forward them straight here.

<InputWrapper size="small"><input class="vuiii-input__nested" v-model="value" /></InputWrapper>
<InputWrapper :invalid="hasError"><input class="vuiii-input__nested" v-model="value" /></InputWrapper>
<InputWrapper pill><input class="vuiii-input__nested" v-model="value" /></InputWrapper>

Clickable Icons

Mark an icon *-icon-clickable and it renders as a focusable button; without it the icon stays decorative and out of the tab order. Pass a label so the button is announced — it falls back to the icon name, which is rarely what you want a screen reader to read out.

<InputWrapper
  prefix-icon="search"
  suffix-icon="x"
  suffix-icon-clickable
  suffix-icon-label="Clear"
  @suffix-icon-click="query = ''"
>
  <input class="vuiii-input__nested" v-model="query" />
</InputWrapper>

Why not infer it from the listener?

Because the components that wrap this one — Input, Textarea, Autocomplete — re-emit both events unconditionally, so a listener is always present by the time it gets here. Declaring it keeps decorative icons unfocusable.

Building a Native Date Field

The library ships no date picker, but a native <input type="date"> inside InputWrapper matches the rest of a form for free.

<InputWrapper prefix-icon="calendar">
  <input class="vuiii-input__nested" type="date" v-model="date" />
</InputWrapper>

Custom Prefix and Suffix Content

The prefix and suffix slots replace the icons entirely — for a currency symbol, a unit, or a whole nested control.

€per month

<InputWrapper>
  <template #prefix><span>€</span></template>
  <input class="vuiii-input__nested" type="number" v-model="price" />
  <template #suffix><span>per month</span></template>
</InputWrapper>

Storybook

For interactive examples with all variants, see InputWrapper in Storybook.