Skip to content

[BUG] - Input-otp variants #5168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
PriteshUE opened this issue Apr 9, 2025 · 2 comments · Fixed by #5179
Closed

[BUG] - Input-otp variants #5168

PriteshUE opened this issue Apr 9, 2025 · 2 comments · Fixed by #5179
Assignees
@wingkwong
Labels
🎨 Scope : Themes / Styles Related to the themes or styles

Comments

@PriteshUE
Copy link

PriteshUE commented Apr 9, 2025 •
edited by wingkwong
Loading

HeroUI Version

2.7.0

Describe the bug

import {InputOtp} from "@heroui/react";

export default function App() {
  const variants = ["flat", "bordered", "underlined", "faded"];

  return (
    <div className="w-full flex flex-wrap gap-4">
      {variants.map((variant) => (
        <div key={variant}>
          <div className="text-default-500">variant: {variant}</div>
          <InputOtp length={4} variant={variant} />
        </div>
      ))}
    </div>
  );
}

in this inputOtp add a bg-black for background color is black and using this is input otp is not visable because text is black and bg-black

import { InputOtp } from "@heroui/react";

export default function App() {
  const variants = ["flat", "bordered", "underlined", "faded"];

  return (
    <div className="w-full flex flex-wrap gap-4 bg-black">
      {variants.map((variant) => (
        <div key={variant}>
          <div className="text-default-500">variant: {variant}</div>
          <InputOtp length={4} variant={variant} />
        </div>
      ))}
    </div>
  );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. go to
  2. click on otp first
  3. enter any number
  4. number is not visable

Expected behavior

when bg-black then inputOtp field number is white

and on bg-white then inputOtp text-black

Screenshots or Videos

No response

Operating System Version

windows

Browser

Chrome
@linear Linear
Copy link

linear bot commented Apr 9, 2025

ENG-2393 [BUG] - Input-otp variants

@PriteshUE
Copy link
Author

bug-heroui_REC.mp4

@wingkwong wingkwong added the 🎨 Scope : Themes / Styles Related to the themes or styles label Apr 10, 2025
@wingkwong wingkwong self-assigned this Apr 10, 2025
@wingkwong wingkwong mentioned this issue Apr 10, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wingkwong wingkwong

Labels
🎨 Scope : Themes / Styles Related to the themes or styles
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(input-otp): variants on segment background heroui-inc/heroui
2 participants
@wingkwong @PriteshUE