Add border removal functionality for labels

[daangnkim]

Reason for Improvement

In cases where Korean won (KRW) input is required, borders may be unnecessary. Below is an example of inputting Korean currency (won).

To remove these borders, we currently have to use !border-none as follow.

<label className="input">
  <input type="text" placeholder="domain name" />
  <span className="label !border-none text-black">.com</span>
</label>

Code Changes

The !border-none approach has the drawback of using !important, which ignores CSS specificity hierarchy and forcibly applies styles.

How about adding a border-none option as shown below?

.label {
  @apply inline-flex items-center gap-1.5 whitespace-nowrap text-current/60;
  
  &:has(input) {
    @apply cursor-pointer;
  }
  
  &:is(.input > *, .select > *) {
    @apply flex h-[calc(100%-0.5rem)] items-center px-3 whitespace-nowrap;
    font-size: inherit;
    
    &:first-child:not(.border-none) {
      @apply -ms-3 me-3;
      border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
    }
    
    &:first-child.border-none {
      @apply -ms-3 me-3;
    }
    
    &:last-child:not(.border-none) {
      @apply ms-3 -me-3;
      border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
    }
    
    &:last-child.border-none {
      @apply ms-3 -me-3;
    }
  }
}

This provides a cleaner, more maintainable solution compared to using !important overrides.

[saadeghi]

How about this?
https://play.tailwindcss.com/eR4QlfSMVB

<label class="input">
  <input type="text" placeholder="domain name" />
  <span>.com</span>
</label>

[daangnkim]

I think this is a good approach! 👍

Going further, would it be too much to document this approach in the documentation? 🤔

Personally, I don't think it's excessive because users typically look at examples in the documentation under the Label category, so after entering the label category, they would likely approach it by applying border-none to override the label utility class rather than thinking to remove the label utility class altogether.

So I think it would be good to guide users with the approach that "you can also remove the label and use it!"

For reference, both Chakra UI and MUI include examples that use borderless styling when displaying currency units.