# Input

Get user Input. Use with Field to access all functionalities


edit on github

# Examples

# Base

# Base

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
counterClass Class of the counter element. hasCounter
maxlength
expandedClass Class of input when expanded. expanded
iconLeftClass Class of the left icon. icon
iconLeftSpaceClass Class of the left icon space inside the input. icon
iconRightClass Class of the right icon. iconRight
iconRightSpaceClass Class of the right icon space inside the input. iconRight
inputClass Class of the native input element.
rootClass Class of the root element.
roundedClass Class of input when rounded. rounded
sizeClass Class of the input size. size small
medium
large
variantClass Class of the input variant.
👉 Variant property should be applied to the wrapping field
variant primary
info
warning
danger


# Props

Prop name Description Type Values Default
autocomplete Native options to use in HTML5 validation string -
autosize Automatically adjust height in textarea boolean - false
clearable Add a button/icon to clear the inputed text boolean -
From config

input: {
  clearable: false
}
expanded Makes input full width when inside a grouped or addon field boolean -
hasCounter Show character counter when maxlength prop is passed boolean -
From config

input: {
  counter: false
}
icon Icon name to be added string -
iconClickable Makes the icon clickable boolean -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconRight Icon name to be added on the right side string -
iconRightClickable Make the icon right clickable boolean -
iconRightVariant Variant of right icon string -
maxlength Same as native maxlength, plus character counter number|string -
override Override classes boolean - false
passwordReveal Adds the reveal password functionality boolean -
rounded Makes the element rounded boolean -
size Vertical size of input, optional string small, medium, large
statusIcon Show status icon using field and variant prop boolean -
From config

{
   "statusIcon": true
}
type Input type, like native string Any native input type, and textarea 'text'
useHtml5Validation Enable html 5 native validation boolean -
From config

{
   "useHtml5Validation": true
}
v-model number|string -
validationMessage The message which is shown when a validation error occurs string -
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Events

Event name Properties Description
blur
focus
input

# Style

CSS Variable SASS Variable Default
--oruga-input-background-color $input-background-color #ffffff
--oruga-input-border-color $input-border-color $grey-lighter
--oruga-input-border-style $input-border-style solid
--oruga-input-border-width $input-border-width 1px
--oruga-input-border-radius $input-border-radius $base-border-radius
--oruga-input-rounded-border-radius $input-rounded-border-radius $base-rounded-border-radius
--oruga-input-box-shadow $input-box-shadow inset 0 1px 2px hsla(0,0%,4%,.1)
--oruga-input-color $input-color #363636
--oruga-input-icon-zindex $input-icon-zindex 4
--oruga-input-counter-font-size $input-counter-font-size .75rem
--oruga-input-counter-margin $input-counter-margin .25rem 0 0 .5rem
--oruga-input-height $input-height $control-height
--oruga-input-line-height $input-line-height $base-line-height
--oruga-input-margin $input-margin 0
--oruga-input-padding $input-padding $control-padding-vertical $control-padding-horizontal
--oruga-input-textarea-max-height $input-textarea-max-height 600px
--oruga-input-textarea-min-height $input-textarea-min-height 120px
--oruga-input-textarea-padding $input-textarea-padding 0.625em
--oruga-input-width $input-width 100%
--oruga-input-max-width $input-max-width 100%