PinInputField does not have the props specified on documentation

Description

When I wanted to disable a PinInputField I found that the isDisabled prop didn’t exist

Link to Reproduction

sorry no link required

Steps to reproduce

1. In VS Code:

    <HStack>
      <PinInput id="pinid">
        <PinInputField isDisabled />
      </PinInput>
    </HStack>

1. Here’s a screenshot of the available props beginning with ‘is’:

2. This is the error I get in the console Warning: React does not recognize the isDisabled prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isdisabled instead. If you accidentally passed it from a parent component, remove it from the DOM element.

3. I looked a bit further and noticed that none of the props stated in the documentation are available. (https://chakra-ui.com/docs/form/pin-input#pininputfield)

Chakra UI Version

1.6.10 & .12

Browser

Firefox (but not a browser issue)

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[primos63]

As I tried to explain earlier, having isDisabled on the PinInputField is not going to get you any closer either. It’s also not inline with Pin Input designs you see on sites (at least not the ones I’ve been to). No other toolkit that I know of has implemented this except for NativeBase. However, after release 3.0.6 it quietly disappeared from the website examples and docs. You should be able to get the functionality you want either by working with the PinInput and PinInputField components or by cloning the component and changing the usePinInput hook to get the desired functionality.

If you are having difficulty figuring out what needs to be done you can have a look at the CodeSandbox I created. It’s not perfect, but it’s certainly a good start.

[primos63]

I log into my Chrome tablet using a 6 digit pin code. Inputs 2-6 are not disabled. I do not get to the next field unless the one I’m on is filled. That is a much better way of designing a component. This is a form field that groups individual components to make the whole. There is no usefulness to a single PinInput. Component validation is done at the group. The pin in total is either valid or invalid.