# Inputs

The v-input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. It is recommended that you extend this component, but it can be used as a standalone.

# Usage

v-input has 4 main areas. The prepended slot, the appended slot, the default slot, and messages. These make up the core logic shared between all form components.

# API

# Caveats

# Examples

# Props

# Error

As any validatable Vuetify component, v-input can be set to error state using error prop, messages can be added using error-messages prop. You can determine error messages count to show using error-count property.

# Error count

You can add multiple errors to v-input using error-count property.

# Hide details

When the hide-details prop is set to auto messages will be rendered only if there’s a message (hint, error message etc) to display.

# Hint

v-input can have hint which can tell user how to use the input. persistent-hint prop makes the hint visible always if no messages are displayed.

# Loading

v-input has loading state which can be used, e.g. for data loading indication. Note: v-text-field is used just for example.

# Rules

You can add custom validation rules to v-input, add them as functions returning true/error message. Note: v-text-field is used just for example.

# Success

As any validatable Vuetify component, v-input can be set to success state using success prop, you can add message to it using success-messages prop.

# Events

# Slot clicks

v-input can have click:append and click:prepend events for its slots. Note: v-text-field is used just for example.

# Slots

# Append and prepend

v-input has append and prepend slots. You can place custom icons in them.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:10/07/2024, 11:31:37 AM