How to hide input focus highlight?

[MarcusDelvecchio]

How do I disable / hide the border / ring when autofocusing an <Input/> component? I have attempted to use all of the slots classNames and even use a parent div with the following properties applied, but my input still has a ring on autofocus.

class I've tried

#hidden-focus-ring > * {
    --tw-ring-shadow: unset !important;
    --tw-ring-inset: none !important; /* Disable the inset ring */
}

I have tried a range of properties on all of the slots and input className:
"!ring-0 focus-visible:ring-transparent !focus-visible:ring-transparent"
along with a few others.

[leobudima]

On the Radio component, I managed (after a lot of trial/error) to do it by targeting the "wrapper" slot:

<Radio
  classNames={{
    wrapper: 'group-data-[focus-visible=true]:ring-0 group-data-[focus-visible=true]:ring-offset-0'
  }}
>
  Test
</Radio>

[sourovBasu07]

Thanks. On Input, the targeted className is inputWrapper