[BUG] - Input labelPlacement and variant BUG

[jacobsaki]

HeroUI Version

2.6.13

Describe the bug

Form Input keywords "labelPlacement"="inside" and "variant"="underlined" are not functional.

this does not render the variant or label inside. The styling and parent components have no effect as even in isolation these fields have no effect on the output.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Make an input
2. set =labelPlacement="inside" and/or variant="underlined"
3. observe the lack of rendering

Expected behavior

I want to see the behavior outlined on https://www.heroui.com/docs/components/input

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1903 [BUG] - YOUR_ISSUE_TITLE_HERE_REPLACE_ME

[wingkwong]

This is what I see. Can you share the screenshot and the exact code that you are using?

[jprosevear]

Looks fine here too.

[jacobsaki]

This is my form code that yields the following image. Thank you guys for checking on your end i think it could be that the form submit wrapping is overriding some properties.

            <form
              style={styles.form}
              action="https://formsubmit.co/redactedemail"
              method="POST"
              onSubmit={handleSubmit} // Use custom submit handler
            >
              {/* Input fields */}
              <Input
                label="Name"
                name="name"
                labelPlacement="inside"
                fullWidth
                value={formData.name}
                onChange={handleInputChange}
                style={styles.input}
              />

              <Input
                label="Email"
                name="email"
                labelPlacement="inside"
                type="email"
                fullWidth
                value={formData.email}
                onChange={handleInputChange}
                style={styles.input}
              />

              <Input
                label="Phone"
                name="phone"
                labelPlacement="inside"
                type="tel"
                fullWidth
                value={formData.phone}
                onChange={handleInputChange}
                style={styles.input}
              />

              <Textarea
                label="Message"
                name="message"
                labelPlacement="inside"
                fullWidth
                rows={5}
                value={formData.message}
                onChange={handleInputChange}
                style={styles.textarea}
              />

              {/* Hidden input for FormSubmit configuration */}
              <input type="hidden" name="_captcha" value="false" />
              <input type="hidden" name="_template" value="table" />
              <input type="hidden" name="_subject" value="New Contact Form Submission" />
              <input type="hidden" name="_next" value="redactedlink"></input>

              {/* Submit button */}
              <Button type="submit" style={styles.button}>
                Submit
              </Button>

              {/* Error message */}
              {error && <p style={styles.error}>{error}</p>}
            </form>

[wingkwong]

@jacobsaki Wrapping the input in a form should not be a problem. The style in the code is unknown. Can you please provide a sandbox instead so that we could investigate more efficiently?

[jacobsaki]

My apologies, heres a cut down version with styles that still has the issue with label behavior:

import React, { useState } from "react";
import { Input, Textarea, Button } from "@heroui/react";

const ContactForm = () => {
  // State for form inputs
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    message: "",
  });

  const [error, setError] = useState("");

  // Handle input change
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
    setError(""); // Reset error message on input change
  };

  // Handle form submit
  const handleSubmit = (e) => {
    e.preventDefault();

    if (!formData.name) {
        setError("Please provide your name.");
        return;
    }

    if (!formData.phone && !formData.email) {
      setError("Please provide either a phone number or email address, so we can get back to you.");
      return;
    }

    if (!formData.message) {
      setError("Please provide a message, so we know how to help.");
      return;
    }

    console.log("Form submitted", formData);
  };

  return (
    <form
      style={{ display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "400px" }}
      onSubmit={handleSubmit}
    >
      {/* Input fields */}
      <Input
        label="Name"
        name="name"
        labelPlacement="inside"
        fullWidth
        value={formData.name}
        onChange={handleInputChange}
      />

      <Input
        label="Email"
        name="email"
        labelPlacement="inside"
        type="email"
        fullWidth
        value={formData.email}
        onChange={handleInputChange}
      />

      <Input
        label="Phone"
        name="phone"
        labelPlacement="inside"
        type="tel"
        fullWidth
        value={formData.phone}
        onChange={handleInputChange}
      />

      <Textarea
        label="Message"
        name="message"
        labelPlacement="inside"
        fullWidth
        rows={5}
        value={formData.message}
        onChange={handleInputChange}
      />

      {/* Submit button */}
      <Button type="submit">Submit</Button>

      {/* Error message */}
      {error && <p style={{ color: "red" }}>{error}</p>}
    </form>
  );
};

export default ContactForm;

[jprosevear]

This looks like the HeroUI styles are not loaded; what is tailwind.config.js and postcss.config.js

[jacobsaki]

That must be it because i added tailwind after creating the basic next js app (with app directory) and im unfamiliar with these files.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}', // Include the app directory if using Next.js 13
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

[jprosevear]

https://www.heroui.com/docs/frameworks/nextjs#manual-installation - you don't appear to have included any of the heroui setup.

[wingkwong]

Ya I also think the styles are not loaded due to the misconfiguration.

1. please make sure the following paths are correct

'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}', // Include the app directory if using Next.js 13

2. plugins: [heroui()] is missing
3. check if tailwind directives are in your css

@tailwind base;
@tailwind components;
@tailwind utilities;