[input] [rounded corner calss doesn't work]

[anchan42]

I copy to code for input and change the rounded class to something like rounded-full.
The rounded corner stay all the same even with the rounded class removed completely.
My code is below:

                <div class="relative" data-te-input-wrapper-init>
                    <input
                        class="peer block rounded-full min-h-[auto] w-full border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none  [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                        id="search_bd_reports_input" name="search_bd_reports" type="text"
                        value="{{ request()->get('search') }}" />
                    <label
                        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none"
                        for="search_bd_reports_input">Search term
                    </label>

                </div>

[juujisai]

Hi! You would have to play a bit with the default styles added to notches. The radius of the border can be changed by customizing the classes of notchLeading and notchTrailing element.

You can do it with data attributes like that: data-te-class-notch-leading="new_classes".

In the example below I have changed a few things:

• notchLeading: instead of rounded-l-[0.25rem] i used rounded-l-full / changed w-2 to !w-6
• notchTrailing: instead of rounded-r-[0.25rem] i used rounded-r-full
• label HTML element: added !ml-4 class

      <div class="relative mb-3" 
        data-te-input-wrapper-init
        data-te-class-notch-leading="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full !w-6 border-r-0 rounded-l-full group-data-[te-input-focused]:border-r-0 group-data-[te-input-state-active]:border-r-0"
        data-te-class-notch-trailing="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-full group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0"
        >
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInput122"
          placeholder="Example label" />
        <label
          for="exampleFormControlInput122"
          class="pointer-events-none !ml-4 absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Example label
        </label>
      </div>

I hope it will be helpfull. Best Regards!

[anchan42]

That is very helpful. Thanks a lot.