Input

Interactive documentation for the input component. Change props in the playground, inspect states, and copy the generated example.

last action: —

Preview

<Input
  v-model="value"
  placeholder="Email"
  class="w-[264px]"
  @action="handleAction"
/>

Common input states for empty, completed, disabled, and error values.

Placeholder

CAD

Placeholder

CAD

Placeholder

CAD

Placeholder

CAD

Error message

Common combinations used in forms and checkout flows.

Email *

Placeholder

CAD

Handlebar Width

This table matches the current InputProps interface.

Prop	Type	Default	Description
modelValue	string	''	Current input value used by v-model.
size	'l' \| 'xl' \| 'responsive-l-xl'	'l'	Controls height, padding, font size, icon size, and responsive layout styles.
square	boolean	false	Uses square right-side layout and adjusted border radius.
rounded	boolean	false	Applies fully rounded outer and inner corners.
placeholder	string	undefined	Floating label text rendered above the input.
disabled	boolean	false	Disables the input and action button interaction.
trailingIcon	string	undefined	Icon rendered on the right side inside the input field.
trailingText	string	undefined	Static trailing text rendered after the input value.
class	string	'w-full'	Additional classes applied to the root container.
error	string	undefined	Displays error styles and renders an error message below the input.
required	boolean	false	Displays required indicator inside the floating label.
showButton	boolean	false	Shows the action button on the right side of the input.
buttonIcon	string	''	Custom icon rendered inside the action button.
buttonText	string	''	Text rendered inside the action button.
clearOnAction	boolean	true	Clears the input value after the action event is emitted.