[Bug]: multiple properties not working for PinInput

[stefandevo]

Prerequisites

• I have searched existing issues to ensure this bug hasn't been reported already
• I have tested this with the latest version of the components

Bug description

when setting autoFocus on the PinInput control, focus is not set upon page load.
when setting isRequired on the PinInput control, no * is added to the label.
when setting isInvalid on the PinInput control, no red border, and description is not colored red.

Steps to reproduce

<PinInput isRequired isInvalid autoFocus size="sm">
    <PinInput.Label>Secure code</PinInput.Label>
    <PinInput.Group maxLength={6}>
        <PinInput.Slot index={0} />
        <PinInput.Slot index={1} />
        <PinInput.Slot index={2} />
        <PinInput.Slot index={3} />
        <PinInput.Slot index={4} />
        <PinInput.Slot index={5} />
    </PinInput.Group>
    <PinInput.Description>This is a hint text to help user.</PinInput.Description>
</PinInput>

on a page, loading the page, no autofocus on first element. No isRequired visual style. No isInvalid visual style.

Expected behavior

PinInput gets directly the focus on a page where we place the PinInput on when autofocus set.
isRequired should display * next to label.
isInvalid should color the borders red and the Description red.

Actual behavior

no autofocus, no *, no red border

Accessibility impact

• This bug affects keyboard navigation
• This bug affects screen reader users
• This bug affects focus management
• This bug affects color contrast or visual accessibility

[deebov]

Thanks for reporting this! Looking into it...

[stefandevo]

Been looking around, it's a little bit inconsistent that certain properties of Input and Select for example like label, hint, etc are not used here.
I also found out that autofocus does work, but you have to place it on PinInput.Group; also getting the value and other events needs to be placed over there.
I really would like to have a single <PinInput label='Secure Code' hint='This is a hint to help the user' onChange={(value) => {
console.log("PIN value changed:", value); }} onComplete={(value) => {console.log("PIN completed:", value);}} /> component.

[deebov]

Good point! We built our pin input based on input-otp so we tried to not enclose all the details of input-otp behind our own API but we're currently considering making a little more consistent with the rest of our form components.