Input Group (TInputGroup)

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

Playground:


Basic example

<t-input-group
  label="Password"
  feedback="Password must be at least 6 characters long"
>
  <t-input
    variant="error"
    value="password"
    type="password"
  />
</t-input-group>
Password must be at least 6 characters long

Props

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:

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

Example

{
  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'
    }
  }
}

Slots

Slotdescription
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.