Skip to content

Input

Get user Input. Use with Field to access all functionalities

Examples

Base

Show code

Variants

Show code

Sizes

Show code

With Icons

Show code

Class props

'Classes applied to the element'

Input component

Get user Input. Use with Field to access all functionalities

html
<o-input></o-input>

Props

Prop nameDescriptionTypeValuesDefault
autocompleteNative options to use in HTML5 validationstring-
From config:
input: {
  autocomplete: "off"
}
autosizeAutomatically adjust height in textareaboolean-false
clearIconIcon name to be added on the clear buttonstring-
From config:
input: {
  clearIcon: "close-circle"
}
clearableAdd a button/icon to clear the inputed textboolean-
From config:
input: {
  clearable: false
}
counterShow character counter when maxlength prop is passedboolean-
From config:
input: {
  counter: false
}
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: string | number, state: ValidityState) => string)-""
debounceNumber of milliseconds to delay before to emit input eventnumber-
From config:
autocomplete: {
  debounce: 400
}
disabledSame as native disabledboolean-false
expandedMakes input full width when inside a grouped or addon fieldboolean-false
iconIcon to be shownstring-
From config:
input: {
  icon: undefined
}
iconClickableMakes the icon clickableboolean-false
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
input: {
  iconPack: undefined
}
iconRightIcon to be added on the right sidestring-
From config:
input: {
  iconRight: undefined
}
iconRightClickableMake the icon right clickableboolean-false
iconRightVariantVariant of right iconstring-
idSame as native id. Also set the for label for o-field wrapper.string-uuid()
maxlengthSame as native maxlength, plus character counterstring | number-
v-modelThe input value statestring | number-
numberConvert the ´modelValueinto typenumber`boolean-
overrideOverride existing theme classes completelyboolean-
passwordRevealAdds the reveal password functionalityboolean-false
placeholderInput placeholderstring-
roundedMakes the element roundedboolean-false
sizeSize of the controlstringsmall, medium, large
From config:
input: {
  size: undefined
}
statusIconShow status icon using field and variant propboolean-
From config:
{
  statusIcon: true
}
typeInput type, like nativestringAny native input type, and textarea"text"
useHtml5ValidationEnable HTML 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
input: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:modelValuevalue string | number - updated modelValue propmodelValue prop two-way binding
inputvalue string | number - input value
event Event - native event
on input change event
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event
icon-clickevent Event - native eventon icon click event
icon-right-clickevent Event - native eventon icon right click event

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$input-background-color#ffffff
$input-border-colorvar(--#{$prefix}grey-lighter)
$input-border-stylesolid
$input-border-width1px
$input-border-radiusvar(--#{$prefix}base-border-radius)
$input-rounded-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$input-box-shadow$control-box-shadow
$input-color#363636
$input-icon-zindex4
$input-height$control-height
$input-line-heightvar(--#{$prefix}base-line-height)
$input-margin0
$input-padding$control-padding-vertical $control-padding-horizontal
$input-counter-font-size0.75rem
$input-counter-margin0.25rem 0 0 0.5rem
$input-textarea-max-height600px
$input-textarea-min-height120px
$input-textarea-padding0.625em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$input-icon-color$input-color
$input-icon-spacer0.75rem
$input-icon-padding-sm2rem
$input-icon-padding2.5rem
$input-icon-padding-lg3rem

See ➜ 📄 Full scss file

Released under the MIT License.