Components Input field

Default Input field

html

typescript

<form class="mx-auto max-w-sm">
  <div flowbiteFormField>
    <label
      flowbiteLabel
      for="email">
      Email address
    </label>
    <input
      flowbiteFormControl
      id="email"
      name="email"
      placeholder="email@flowbite-angular.com" />
    <p flowbiteHelper>
      We’ll never share your details. Read our
      <a
        href="#"
        class="font-medium text-blue-600 hover:underline dark:text-blue-500">
        Privacy Policy
      </a>
      .
    </p>
  </div>
  <div flowbiteFormField>
    <label
      flowbiteLabel
      for="password">
      Password
    </label>
    <input
      flowbiteFormControl
      id="password"
      name="password"
      placeholder="•••••••••" />
  </div>
  <button
    flowbiteButton
    color="info"
    type="submit"
    class="w-full">
    Submit
  </button>
</form>

Themes

Form control

{
  "host": {
    "base": "block w-full text-sm",
    "transition": "",
    "disabled": "data-disabled:cursor-not-allowed",
    "size": {
      "sm": "p-2",
      "md": "p-2.5",
      "xl": "p-3"
    },
    "color": {
      "default": {
        "light": "border-gray-300 bg-gray-50 text-gray-900 outline-gray-200",
        "dark": "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:outline-gray-700"
      },
      "info": {
        "light": "border-blue-300 bg-gray-50 text-blue-900 outline-blue-200",
        "dark": "dark:border-blue-600 dark:bg-gray-700 dark:text-blue-500 dark:placeholder-blue-400 dark:outline-blue-700"
      },
      "failure": {
        "light": "border-red-300 bg-gray-50 text-red-900 outline-red-200",
        "dark": "dark:border-red-600 dark:bg-gray-700 dark:text-red-500 dark:placeholder-red-400 dark:outline-red-700"
      },
      "success": {
        "light": "border-green-300 bg-gray-50 text-green-900 outline-green-200",
        "dark": "dark:border-green-600 dark:bg-gray-700 dark:text-green-500 dark:placeholder-green-400 dark:outline-green-700"
      },
      "warning": {
        "light": "border-yellow-300 bg-gray-50 text-yellow-900 outline-yellow-200",
        "dark": "dark:border-yellow-600 dark:bg-gray-700 dark:text-yellow-500 dark:placeholder-yellow-400 dark:outline-yellow-700"
      },
      "primary": {
        "light": "border-primary-300 text-primary-900 outline-primary-200 bg-gray-50",
        "dark": "dark:border-primary-600 dark:text-primary-500 dark:placeholder-primary-400 dark:outline-primary-700 dark:bg-gray-700"
      }
    },
    "mode": {
      "normal": "rounded-lg border data-focus:outline-2",
      "floating": "peer appearance-none border-b-2 bg-transparent px-0 not-data-focus:border-gray-300 data-focus:outline-0 dark:bg-transparent"
    }
  }
}

Form field

{
  "host": {
    "base": "mb-5",
    "transition": "",
    "mode": {
      "normal": "block",
      "floating": "group relative z-0"
    }
  }
}

Helper

{
  "host": {
    "base": "mt-2 text-sm",
    "transition": "",
    "color": {
      "default": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "info": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "failure": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "success": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "warning": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "primary": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      }
    }
  }
}

Label

{
  "host": {
    "base": "mb-2 block text-sm font-medium",
    "transition": "",
    "color": {
      "default": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "info": {
        "light": "text-blue-900",
        "dark": "dark:text-blue-500"
      },
      "failure": {
        "light": "text-red-900",
        "dark": "dark:text-red-500"
      },
      "success": {
        "light": "text-green-900",
        "dark": "dark:text-green-500"
      },
      "warning": {
        "light": "text-yellow-900",
        "dark": "dark:text-yellow-500"
      },
      "primary": {
        "light": "text-primary-900",
        "dark": "dark:text-primary-500"
      }
    },
    "mode": {
      "normal": "",
      "floating": "absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform transition-transform duration-150 ease-in-out peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:font-medium"
    }
  }
}