Skip to content

Input.md

Latest commit

 

History

History
145 lines (109 loc) · 19.3 KB

Input.md

File metadata and controls

145 lines (109 loc) · 19.3 KB

Input

The Input component uses HTML's native text input. It allows a user to enter a single line of text. Combine it with the Field component to access all functionalities.

Examples

Input Component

Get user Input. Use with Field to access all functionalities.

<o-input></o-input>

Props

Prop name Description Type Values Default
autocomplete Native options to use in HTML5 validation string -
From config:
input: {
  autocomplete: "off"
}
autosize Automatically adjust height in textarea boolean - false
clearIcon Icon name to be added on the clear button string -
From config:
input: {
  clearIcon: "close-circle"
}
clearable Add a button/icon to clear the inputed text boolean -
From config:
input: {
  clearable: false
}
counter Show character counter when maxlength prop is passed boolean -
From config:
input: {
  counter: false
}
customValidity Custom HTML 5 validation error to set on the form control string | ((currentValue: InputType<IsNumber> | null , state: ValidityState) => string) | undefined - ""
debounce Number of milliseconds to delay before the value get emitted number -
From config:
autocomplete: {
  debounce: undefined
}
disabled Same as native disabled boolean - false
expanded Makes input full width when inside a grouped or addon field boolean -
From config:
input: {
  expanded: false
}
icon Icon to be shown string -
From config:
input: {
  icon: undefined
}
iconClickable Makes the icon clickable boolean - false
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
From config:
input: {
  iconPack: undefined
}
iconRight Icon to be added on the right side string -
From config:
input: {
  iconRight: undefined
}
iconRightClickable Make the icon right clickable boolean - false
iconRightVariant Variant of right icon string -
id Same as native id. Also pass the id to a wrapping o-field component. Default is a uuid. string - useId()
maxlength Same as native maxlength, plus character counter number | string -
modelModifiers Partial<Record<string, true>> -
v-model The input value state number | string -
number Convert the ´modelValueinto typenumber` boolean -
override Override existing theme classes completely boolean -
passwordReveal Adds the reveal password functionality boolean - false
placeholder Input placeholder string -
rounded Makes the element rounded boolean - false
size Size of the control string small, medium, large
From config:
input: {
  size: undefined
}
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
}
variant Color variant of the control string primary, info, success, warning, danger, and any other custom color
From config:
input: {
  variant: undefined
}

Events

Event name Properties Description
update:model-value value string | number - updated modelValue prop modelValue prop two-way binding
input value string - input value
event Event - native event		 on input change event
focus event Event - native event on input focus event
blur event Event - native event on input blur event
invalid event Event - native event on input invalid event
icon-click event Event - native event on icon click event
icon-right-click event Event - native event on icon right click event

Class Inspector

Sass Variables

Current theme ➜ Oruga

SASS Variable Default
$input-color h.useVar("font-color")
$input-font-size h.useVar("font-size")
$input-font-weight h.useVar("font-weight")
$input-line-height h.useVar("line-height")
$input-height h.useVar("control-height")
$input-padding h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal")
$input-disabled-opacity h.useVar("control-disabled-opacity")
$input-box-shadow h.useVar("control-box-shadow-inset")
$input-border-width h.useVar("control-border-width")
$input-border-style solid
$input-border-color h.useVar("control-border-color")
$input-border-radius h.useVar("border-radius")
$input-border-radius-rounded h.useVar("border-radius-rounded")
$input-background-color h.useVar("control-background-color")
$input-textarea-min-height 120px
$input-textarea-max-height 600px
$input-textarea-padding h.useVar("control-spacer")
$input-counter-font-size 0.75rem
$input-counter-padding 0.25rem 0.5rem

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS Variable Default
$input-colors dv.$colors

See ➜ 📄 SCSS file

Current theme ➜ Bootstrap

SASS Variable Default
$input-icon-color $input-color
$input-icon-spacer 0.75rem
$input-icon-padding-sm 2rem
$input-icon-padding 2.5rem
$input-icon-padding-lg 3rem

See ➜ 📄 SCSS file