Input Group (TInputGroup)

VueJs input group component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.


Basic example

  feedback="Password must be at least 6 characters long"
Password must be at least 6 characters long


PropertyTypeDefault valueDescription
labelStringundefinedThink as the title of the input group
descriptionStringundefinedDescription for whats inside the input group
feedbackStringundefinedLike the description but for showing some feedback
sortedElementsArray['label', 'default', 'feedback', 'description']The elements in the order that will be rendered
classesObject{...} (see below)The default CSS classes
fixedClassesObject{...} (see below)The default CSS Fixed classes shared for all variants
variantsObjectundefinedThe different variants of classes the component have
variant[String, Object]undefinedThe variant that should be used

Classes and variants format

This component expects an object with classes named after every child element.

The properties in that object are the following:

wrapperBase input group wrapper class
labelLabel classes
bodyInput wrapper classes
feedbackFeedback message classes
descriptionDescription message classes


  fixedClasses: {
    wrapper: 'mb-4',
    label: 'block uppercase tracking-wide text-xs font-bold mb-1',
    body: '',
    feedback: 'text-sm',
    description: 'text-sm'
  classes: {
    wrapper: '',
    label: '',
    body: '',
    feedback: 'text-gray-500',
    description: 'text-gray-500'
  variants: {
    danger: {
      label: 'text-red-500',
      feedback: 'text-red-500'
    success: {
      label: 'text-green-500',
      feedback: 'text-green-500'


defaultContent of the input group body
labelContent of the label
feedbackContent of the feedback message
descriptionContent of the description message

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.