VueTailwind

# Input Group

# Playground

Password must be at least 6 characters long
Password group status

# Basic example

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

# Props

Property Type Default value Accepted values
label String null Any valid type
description String null Any valid type
feedback String null Any valid type
orderedElements Array ['label', 'default', 'feedback', 'description'] The same array in the order you want to the elements to be render
status String / Boolean null true, false, 'success', 'error', 'warning'
Property Description
baseClass Base input group wrapper class
statusClass An {Object} with the classes according to the different status:
statusClass.{statusName}.label Label classes
statusClass.{statusName}.body Body classes
statusClass.{statusName}.feedback Feedback message classes
statusClass.{statusName}.description Description classes

# Default theme settings

const TInputGroup = {
  baseClass: 'mb-3',
  labelClass: 'block uppercase tracking-wide text-xs font-bold mb-1',
  bodyClass: '',
  feedbackClass: 'text-sm',
  descriptionClass: 'text-sm',
  statusClass: {
    default: {
      label: 'text-gray-700',
      body: '',
      feedback: 'text-gray-700',
      description: 'text-gray-700',
    },
    error: {
      label: 'text-red-700',
      body: '',
      feedback: 'text-red-700',
      description: 'text-gray-700',
    },
    success: {
      label: 'text-green-700',
      body: '',
      feedback: 'text-green-700',
      description: 'text-gray-700',
    },
    warning: {
      label: 'text-yellow-700',
      body: '',
      feedback: 'text-yellow-700',
      description: 'text-gray-700',
    }
  }
}

export default TInputGroup
  • Remember that in order to change the default settings you can change default theme or use the props:
<t-input-group label="Your full name" :status-class="{
  default: {
    label: 'block font-bold text-sm text-purple-700',
  }
}">
  <t-input />
</t-input-group>

# The result:

←