# Input

Input form field with validation and built-in label animation

# Most common usage scenario

<template>
  <div style="padding: 10px;">
    <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"
      :placeholder="placeholder"
    />
  </div>
</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,
      placeholder: "",
    };
  },
};
</script>

# Props

  • value

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

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

    • Form input name
    • type: string
    • defaultValue: ""
  • 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: ""
  • 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--filled
  • .sf-input--outline

# CSS custom properties (variables)

  • --input-width
  • --input-height
  • --input-label-display
  • --input-label-top
  • --input-label-left
  • --input-label-padding
  • --input-label-color
  • --input-label-background
  • --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
  • --input-border-color
  • --icon-size
  • --button-padding
  • --button-background
  • --button-box-shadow

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.