# Input

Input form field with validation and built-in label animation

# Most common usage scenario

<template>
  <SfInput
    v-model="value"
    :type="type"
    :label="label"
    :name="name"
    :valid="valid"
    :error-message="errorMessage"
    :required="required"
    :disabled="disabled"
    :has-show-password="hasShowPassword"
    :class="customClass"
  />
</template>
<script>
import { SfInput } from "@storefront-ui/vue";
export default {
  components: {
    SfInput,
  },
  data() {
    return {
      value: "",
      type: "text",
      label: "First name",
      name: "first-name",
      errorMessage: "Required.",
      valid: true,
      required: true,
      disabled: false,
      hasShowPassword: false,
    };
  },
};
</script>

# Props

  • value

    • Current input value (v-model)
    • type: string|number
    • defaultValue: null
  • label

    • Form input label
    • type: string
    • defaultValue: null
  • name

    • Form input name
    • type: string
    • defaultValue: null
  • type

    • Form input type
    • type: string
    • defaultValue: "text"
  • valid

    • Validate value of form input
    • type: boolean
    • defaultValue: true
  • errorMessage

    • Error message value of form input. It will be appeared if valid is true.
    • type: string
    • defaultValue: null
  • required

    • Native input required attribute
    • type: boolean
    • defaultValue: false
  • disabled

    • Native input disabled attribute
    • type: boolean
    • defaultValue: false
  • hasShowPassword

    • Status of show password icon display
    • type: boolean
    • defaultValue: false

# Slots

  • label

    • Custom input label
    • bindings: label
  • show-password

    • bindings: isPasswordVisible, switchVisibilityPassword
  • error-message

    • Custom error message of form input
    • bindings: errorMessage

# Events

  • input

# CSS modifiers

  • .sf-input__password-icon--hidden
  • .sf-input--invalid
  • .sf-input--has-text
  • .sf-input--filled

# CSS custom properties (variables)

  • --input-width
  • --input-height
  • --input-label-display
  • --input-label-top
  • --input-label-left
  • --input-label-color
  • --input-label-transform
  • --input-label-transition
  • --input-label-font
  • --input-label-font-weight
  • --input-label-font-size
  • --input-label-font-line-height
  • --input-label-font-family
  • --input-label-required
  • --input-bar-display
  • --input-bar-width
  • --input-bar-background
  • --input-error-message-color
  • --input-error-message-font
  • --input-error-message-font-weight
  • --input-error-message-font-size
  • --input-error-message-font-line-height
  • --input-error-message-font-family
  • --input-margin
  • --input-padding
  • --input-border
  • --input-border-width
  • --input-background
  • --input-color
  • --input-font
  • --input-font-weight
  • --input-font-size
  • --input-font-line-height
  • --input-font-family
  • --input-text-align
  • --input-icon-top
  • --input-icon-right
  • --input-password-icon-background
  • --input-password-icon-scaleX

# Overridden other components CSS variables

  • --icon-color
  • --icon-size
  • --button-padding
  • --button-background
  • --button-box-shadow
  • --input-border-color

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.