Input Group


Password must be at least 6 characters long
Password group status

Basic example

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


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 />

The result: