Input

Get user Input. Use with Field to access all functionalities

---

edit on github

Examples

Base

<template>
  <section>
    <o-field label="Name">
      <o-input v-model="name"></o-input>
    </o-field>

    <o-field label="Email" variant="danger" message="This email is invalid">
      <o-input type="email" value="john@" maxlength="30"> </o-input>
    </o-field>

    <o-field label="Username" variant="success" message="This username is available">
      <o-input value="johnsilver" maxlength="30"></o-input>
    </o-field>

    <o-field label="Password">
      <o-input type="password" value="iwantmytreasure" password-reveal> </o-input>
    </o-field>

    <o-field label="Message">
      <o-input maxlength="200" type="textarea"></o-input>
    </o-field>

    <o-field>
      <o-input placeholder="No label"></o-input>
    </o-field>

    <o-field label="Rounded">
      <o-input placeholder="No label" rounded></o-input>
    </o-field>

    <o-field label="Success" variant="success">
      <o-input placeholder="Success"></o-input>
    </o-field>

    <o-field label="Error" variant="danger" message="You can have a message too">
      <o-input placeholder="Error"></o-input>
    </o-field>

    <o-field label="Info" variant="info">
      <o-input placeholder="Info"></o-input>
    </o-field>

    <o-field label="Warning" variant="warning">
      <o-input placeholder="Warning"></o-input>
    </o-field>

    <o-field label="Disabled">
      <o-input placeholder="Disabled" disabled></o-input>
    </o-field>

    <o-field>
      <o-input placeholder="Large" size="large" icon="user"> </o-input>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        name: 'John Silver'
      }
    }
  }
</script>

Base

<template>
  <section>
    <h3 class="subtitle">With Icons</h3>
    <o-field>
      <o-input placeholder="Search..." type="search" icon="search" icon-clickable @icon-click="searchIconClick"> </o-input>
    </o-field>

    <o-field>
      <o-input placeholder="Email" v-model="email" type="email" icon="envelope" icon-right="times-circle" icon-right-clickable @icon-right-click="clearIconClick"> </o-input>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        email: ''
      }
    },
    methods: {
      searchIconClick() {
        alert('You wanna make a search?')
      },
      clearIconClick() {
        this.email = ''
        alert('Email cleared!')
      }
    }
  }
</script>

Class props

📄 Full scss file

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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 }
clearIcon	Icon name to be added on the clear button	string	-	'close-circle'
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
invalid
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%